EoD
This commit is contained in:
parent
91de639896
commit
1eabaf7e73
3 changed files with 18 additions and 10 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
"use client"
|
"use client"
|
||||||
import { BuildingOffice2Icon, EnvelopeIcon, PhoneIcon } from "@heroicons/react/24/outline"
|
import { BuildingOffice2Icon, EnvelopeIcon, PhoneIcon } from "@heroicons/react/24/outline"
|
||||||
import { FormEvent, use, useState } from "react"
|
import { FormEvent, use, useEffect, useState } from "react"
|
||||||
|
|
||||||
export default function Contact() {
|
export default function Contact() {
|
||||||
const [isSent, setIsSent] = useState(false)
|
const [isSent, setIsSent] = useState(false)
|
||||||
|
|
@ -44,18 +44,26 @@ export default function Contact() {
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
if(isSent) {
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
setIsSent(false)
|
||||||
|
}, 3000000)
|
||||||
|
return () => clearTimeout(timeout)
|
||||||
|
}
|
||||||
|
})
|
||||||
return (
|
return (
|
||||||
<div className="relative isolate bg-primary-50">
|
<div className="relative isolate bg-primary-50">
|
||||||
{isSent && (
|
{isSent && (
|
||||||
<div
|
<div
|
||||||
onClick={() => setIsSent(false)}
|
onClick={() => setIsSent(false)}
|
||||||
className="cursor-pointer bg-primary-700 py-4 text-center text-primary-800 lg:px-4"
|
className="cursor-pointer absolute inset-0 flex items-center justify-center"
|
||||||
>
|
>
|
||||||
<div className="flex items-center bg-primary-50 p-2 leading-none lg:inline-flex lg:rounded-full" role="alert">
|
<div className="bg-emerald-900 border-2 rounded-lg h-full w-full p-2" role="alert">
|
||||||
<span className="mr-3 flex rounded-full bg-primary-50 px-2 py-1 text-xs font-bold uppercase">Sent</span>
|
<span className="mr-2 flex-auto text-left font-semibold">Your message has been sent.</span>
|
||||||
<span className="mr-2 flex-auto text-left font-semibold">Your message has been sent.</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
)}
|
)}
|
||||||
<div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
|
<div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
|
||||||
<div className="relative px-6 pb-1 pt-12 sm:pt-32 lg:static lg:px-8 lg:py-20">
|
<div className="relative px-6 pb-1 pt-12 sm:pt-32 lg:static lg:px-8 lg:py-20">
|
||||||
|
|
|
||||||
|
|
@ -37,7 +37,7 @@ export default async function Projects() {
|
||||||
Everything to build your online presence
|
Everything to build your online presence
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
|
<div className="mx-auto mt-8 max-w-2xl sm:mt-20 lg:mt-14 lg:max-w-5xl">
|
||||||
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
|
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
|
||||||
{features.map((feature) => (
|
{features.map((feature) => (
|
||||||
<div key={feature.name} className="relative flex flex-col">
|
<div key={feature.name} className="relative flex flex-col">
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
Loading…
Add table
Add a link
Reference in a new issue