styles, form, backend partial
This commit is contained in:
@ -25,51 +25,52 @@
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--foreground: 20 14.3% 4.1%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--card-foreground: 20 14.3% 4.1%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--popover-foreground: 20 14.3% 4.1%;
|
||||
--primary: 24.6 95% 53.1%;
|
||||
--primary-foreground: 60 9.1% 97.8%;
|
||||
--secondary: 60 4.8% 95.9%;
|
||||
--secondary-foreground: 24 9.8% 10%;
|
||||
--muted: 60 4.8% 95.9%;
|
||||
--muted-foreground: 25 5.3% 44.7%;
|
||||
--accent: 60 4.8% 95.9%;
|
||||
--accent-foreground: 24 9.8% 10%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 10% 3.9%;
|
||||
--destructive-foreground: 60 9.1% 97.8%;
|
||||
--border: 20 5.9% 90%;
|
||||
--input: 20 5.9% 90%;
|
||||
--ring: 24.6 95% 53.1%;
|
||||
--radius: 1rem;
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
--background: 20 14.3% 4.1%;
|
||||
--foreground: 60 9.1% 97.8%;
|
||||
--card: 20 14.3% 4.1%;
|
||||
--card-foreground: 60 9.1% 97.8%;
|
||||
--popover: 20 14.3% 4.1%;
|
||||
--popover-foreground: 60 9.1% 97.8%;
|
||||
--primary: 20.5 90.2% 48.2%;
|
||||
--primary-foreground: 60 9.1% 97.8%;
|
||||
--secondary: 12 6.5% 15.1%;
|
||||
--secondary-foreground: 60 9.1% 97.8%;
|
||||
--muted: 12 6.5% 15.1%;
|
||||
--muted-foreground: 24 5.4% 63.9%;
|
||||
--accent: 12 6.5% 15.1%;
|
||||
--accent-foreground: 60 9.1% 97.8%;
|
||||
--destructive: 0 72.2% 50.6%;
|
||||
--destructive-foreground: 60 9.1% 97.8%;
|
||||
--border: 12 6.5% 15.1%;
|
||||
--input: 12 6.5% 15.1%;
|
||||
--ring: 20.5 90.2% 48.2%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
|
||||
@ -20,7 +20,7 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" className="scroll-smooth">
|
||||
<html lang="en" className="scroll-smooth dark">
|
||||
<head>
|
||||
<PlausibleProvider
|
||||
domain="bangersandmashgbg.com"
|
||||
|
||||
36
app/page.tsx
36
app/page.tsx
@ -1,37 +1,3 @@
|
||||
export default function Home() {
|
||||
return (
|
||||
<form
|
||||
method="post"
|
||||
action="https://listmonk.schulze.network/subscription/form"
|
||||
className="listmonk-form"
|
||||
>
|
||||
<div>
|
||||
<h3>Subscribe</h3>
|
||||
<input type="hidden" name="nonce" />
|
||||
<p>
|
||||
<input type="email" name="email" required placeholder="E-post" />
|
||||
</p>
|
||||
<p>
|
||||
<input type="text" name="name" placeholder="Namn (ej obligatorisk)" />
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input
|
||||
id="c99ab"
|
||||
type="checkbox"
|
||||
name="l"
|
||||
checked
|
||||
value="c99ab65c-cd0a-4ccc-ba63-0c9f7de99ac3"
|
||||
/>
|
||||
<label htmlFor="c99ab">Produktnyheter</label>
|
||||
<br />
|
||||
<span>Produktnyheter för Schulze Network</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input type="submit" value="Prenumerera" />
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
return "helloworld";
|
||||
}
|
||||
|
||||
17
app/sign-up/page.tsx
Normal file
17
app/sign-up/page.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import Image from "next/image";
|
||||
import SignUp from "./sign-up-form";
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="w-4/5 max-w-2xl mx-auto my-12">
|
||||
<Image
|
||||
src="/image/bam.png"
|
||||
alt="Bangers and Mash GBG"
|
||||
width={200}
|
||||
height={200}
|
||||
className="mx-auto"
|
||||
/>
|
||||
<SignUp />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
124
app/sign-up/sign-up-form.tsx
Normal file
124
app/sign-up/sign-up-form.tsx
Normal file
@ -0,0 +1,124 @@
|
||||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { format } from "date-fns";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { signupFormSubmit } from "@/lib/actions";
|
||||
|
||||
export const signupFormSchema = z.object({
|
||||
name: z.string().min(2, { message: "Name is required" }).max(50, { message: "Name is too long" }),
|
||||
email: z.string().email({ message: "Email is invalid" }),
|
||||
dob: z.date({ required_error: "Birthday is required" }),
|
||||
});
|
||||
|
||||
export const youngestDate = new Date(new Date().setFullYear(new Date().getFullYear() - 21));
|
||||
export const oldestDate = new Date(new Date().setFullYear(new Date().getFullYear() - 100));
|
||||
|
||||
export default function SignUp() {
|
||||
const form = useForm<z.infer<typeof signupFormSchema>>({
|
||||
resolver: zodResolver(signupFormSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
email: "",
|
||||
dob: youngestDate,
|
||||
},
|
||||
});
|
||||
function onSubmit(values: z.infer<typeof signupFormSchema>) {
|
||||
signupFormSubmit(values);
|
||||
}
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="name@example.com" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
We will contact you here with information about events.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Firstname Lastname" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>Please enter your full name.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="dob"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Date of birth</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
className={cn(
|
||||
"w-[240px] pl-3 text-left font-normal",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{field.value ? format(field.value, "PPP") : <span>Pick a date</span>}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
required
|
||||
mode="single"
|
||||
showOutsideDays={false}
|
||||
selected={field.value}
|
||||
onSelect={field.onChange}
|
||||
disabled={(date) => date > youngestDate}
|
||||
defaultMonth={field.value}
|
||||
fromDate={oldestDate}
|
||||
toDate={youngestDate}
|
||||
captionLayout="dropdown"
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormDescription>You must be over 21 to sign up.</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button type="submit">Submit</Button>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user