valknar/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: format

Browse Source
This commit is contained in:
Sebastian Krüger
2025-10-10 16:43:21 +02:00
parent f0aabd63b6
commit 75c29e0ba4
551 changed files with 433948 additions and 94145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
Projects/kompose/news/apps/web/src/pages/onboarding/page.tsx
View File

@@ -1,122 +1,122 @@
import {
Form,
FormField,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
Input,
Button,
Textarea,
} from "@repo/ui"
import { zodResolver } from "@hookform/resolvers/zod"
import { Building2Icon } from "lucide-react"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { trpc } from "@/trpc"
import { useNavigate } from "react-router"
import { useLocalStorage } from "usehooks-ts"
Form,
FormField,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
Input,
Button,
Textarea,
} from "@repo/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { Building2Icon } from "lucide-react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { trpc } from "@/trpc";
import { useNavigate } from "react-router";
import { useLocalStorage } from "usehooks-ts";
const formSchema = z.object({
name: z
.string()
.min(2, { message: "Organization name must be at least 2 characters" })
.max(50, { message: "Organization name must be less than 50 characters" }),
description: z.string().optional(),
})
name: z
.string()
.min(2, { message: "Organization name must be at least 2 characters" })
.max(50, { message: "Organization name must be less than 50 characters" }),
description: z.string().optional(),
});
export function OnboardingPage() {
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
name: "",
description: "",
},
})
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
name: "",
description: "",
},
});
const [, setOrgId] = useLocalStorage("orgId", "")
const navigate = useNavigate()
const [, setOrgId] = useLocalStorage("orgId", "");
const navigate = useNavigate();
const createOrganization = trpc.organization.create.useMutation()
const createOrganization = trpc.organization.create.useMutation();
function onSubmit(values: z.infer<typeof formSchema>) {
createOrganization.mutate(values, {
onSuccess: (data) => {
setOrgId(data.organization.id)
navigate("/dashboard")
},
})
}
function onSubmit(values: z.infer<typeof formSchema>) {
createOrganization.mutate(values, {
onSuccess: (data) => {
setOrgId(data.organization.id);
navigate("/dashboard");
},
});
}
return (
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<div className="w-full max-w-md space-y-8">
<div className="space-y-2 text-center">
<div className="inline-block p-3 rounded-full bg-primary/10 mb-3">
<Building2Icon className="h-10 w-10 text-primary" />
</div>
<h1 className="text-3xl font-bold tracking-tight">
Create your organization
</h1>
<p className="text-muted-foreground">
Get started by creating your first organization.
</p>
</div>
return (
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<div className="w-full max-w-md space-y-8">
<div className="space-y-2 text-center">
<div className="inline-block p-3 rounded-full bg-primary/10 mb-3">
<Building2Icon className="h-10 w-10 text-primary" />
</div>
<h1 className="text-3xl font-bold tracking-tight">
Create your organization
</h1>
<p className="text-muted-foreground">
Get started by creating your first organization.
</p>
</div>
<div className="space-y-6 bg-card p-6 rounded-lg border">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Organization name</FormLabel>
<FormControl>
<Input placeholder="Acme Inc." {...field} />
</FormControl>
<FormDescription>
This is your organization&apos;s visible name.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<div className="space-y-6 bg-card p-6 rounded-lg border">
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Organization name</FormLabel>
<FormControl>
<Input placeholder="Acme Inc." {...field} />
</FormControl>
<FormDescription>
This is your organization&apos;s visible name.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>Description</FormLabel>
<FormControl>
<Textarea
placeholder="Tell us a little bit about your organization..."
className="resize-none"
{...field}
/>
</FormControl>
<FormDescription>
A brief description of your organization&apos;s purpose.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>Description</FormLabel>
<FormControl>
<Textarea
placeholder="Tell us a little bit about your organization..."
className="resize-none"
{...field}
/>
</FormControl>
<FormDescription>
A brief description of your organization&apos;s purpose.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
className="w-full"
loading={createOrganization.isPending}
disabled={createOrganization.isPending}
>
Create Organization
</Button>
</form>
</Form>
</div>
</div>
</div>
)
<Button
type="submit"
className="w-full"
loading={createOrganization.isPending}
disabled={createOrganization.isPending}
>
Create Organization
</Button>
</form>
</Form>
</div>
</div>
</div>
);
}