initial commit

components/alert.tsx

@@ -0,0 +1,104 @@
+'use client'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Palette, RocketIcon } from 'lucide-react'
+import { Button } from './ui/button'
+import Link from 'next/link'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { toast } from 'react-hot-toast'
+import { useState, useTransition } from 'react'
+import { Form } from '@/components/ui/form'
+
+export function AlertDemo() {
+  const [email, setEmail] = useState('')
+  const handleSubmit = async (e: any) => {
+    e.preventDefault()
+    const email = e.target.email.value
+    try {
+      const response = await fetch('/api/emails', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ email })
+      })
+      const data = await response.json()
+
+      if (data.message) {
+        toast.success(data.message)
+        setEmail('')
+      } else {
+        console.error(data, 'ha')
+      }
+    } catch (error) {
+      console.error('Error:', error)
+    }
+  }
+
+  return (
+    <div className="w-full max-w-6xl px-6 py-4">
+      <Alert className="flex flex-col sm:flex-row gap-4 justify-between px-6 rounded-xl border-0 ring ring-primary/20 ring-inset text-secondary bg-primary/15 text-black dark:text-white cursor-default">
+        <div>
+          <AlertTitle className="flex gap-1">
+            <RocketIcon className="h-4 w-4" />
+            Heads up!
+          </AlertTitle>
+          <AlertDescription className="flex">
+            <p>This is a demo. You can get the github repository</p>
+            <Dialog>
+              <DialogTrigger asChild>
+                <p className="text-primary ml-1.5 underline cursor-pointer">
+                  here
+                </p>
+              </DialogTrigger>
+              <DialogContent className="rounded-lg sm:max-w-[425px] ">
+                <DialogHeader>
+                  <DialogTitle>Starter Kit</DialogTitle>
+                  <DialogDescription>
+                    Enter your email to get the starterkit link in your inbox
+                  </DialogDescription>
+                </DialogHeader>
+
+                <form onSubmit={handleSubmit}>
+                  <Label htmlFor="name" className="text-right mb-2">
+                    Email
+                  </Label>
+                  <Input
+                    onChange={(e) => setEmail(e.target.value)}
+                    name="email"
+                    id="email"
+                    type="email"
+                    required
+                    placeholder="tylerdurder@gmail.com"
+                    className="mt-3"
+                    value={email}
+                  />
+                  <DialogFooter>
+                    <Button type="submit" className="mt-4">
+                      Get The Starter Kit
+                    </Button>
+                  </DialogFooter>
+                </form>
+              </DialogContent>
+            </Dialog>
+          </AlertDescription>
+        </div>
+        <Link href="/customize" className="mx-auto sm:mx-0">
+          <Button className="gap-2 text-foreground" variant="link">
+            <Palette className="w-5 h-5" />
+            Customize
+          </Button>
+        </Link>
+      </Alert>
+    </div>
+  )
+}