form-1

1import { CircleCheckIcon } from "lucide-react";
2import { Logo } from "@/components/logo";
3import { Button } from "@/components/ui/button";
4import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group";
5import {
6  Field,
7  FieldDescription,
8  FieldGroup,
9  FieldLabel,
10} from "@/components/ui/field";
11import { Input } from "@/components/ui/input";
12import {
13  InputGroup,
14  InputGroupAddon,
15  InputGroupInput,
16} from "@/components/ui/input-group";
17import { Label } from "@/components/ui/label";
18 
19export function CreateWorkspaceForm() {
20  return (
21    <div className="w-full max-w-md rounded-xl border bg-background shadow-sm">
22      <div className="flex flex-col items-center justify-center gap-6 rounded-t-xl border-b bg-card/60 py-12">
23        <Logo className="h-5" />
24        <div className="flex flex-col items-center space-y-1">
25          <h2 className="font-medium text-2xl">Create your workspace</h2>
26          <a className="text-muted-foreground underline" href="#">
27            What is a workspace?
28          </a>
29        </div>
30      </div>
31      <FieldGroup className="p-4">
32        <Field className="gap-2">
33          <FieldLabel htmlFor="name">Workspace Name</FieldLabel>
34          <Input autoComplete="off" id="name" placeholder="e.g., Acme, Inc." />
35          <FieldDescription>
36            This is the name of your workspace on Efferd.
37          </FieldDescription>
38        </Field>
39        <Field className="gap-2">
40          <FieldLabel htmlFor="slug">Workspace Slug</FieldLabel>
41          <ButtonGroup>
42            <ButtonGroupText asChild>
43              <Label htmlFor="slug">efferd.com/</Label>
44            </ButtonGroupText>
45            <InputGroup>
46              <InputGroupInput id="slug" placeholder="e.g., acme" />
47              <InputGroupAddon align="inline-end">
48                <CircleCheckIcon />
49              </InputGroupAddon>
50            </InputGroup>
51          </ButtonGroup>
52          <FieldDescription>
53            This is your workspace's unique slug on Efferd.
54          </FieldDescription>
55        </Field>
56      </FieldGroup>
57      <div className="rounded-b-xl border-t bg-card/60 p-4">
58        <Button className="w-full" type="submit">
59          Create Workspace
60        </Button>
61      </div>
62    </div>
63  );
64}