This commit is contained in:
Sentientsoap 2023-12-12 17:59:15 +01:00
parent 91de639896
commit 1eabaf7e73
3 changed files with 18 additions and 10 deletions

View file

@ -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">

View file

@ -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">

View file

@ -1,3 +1,3 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;