Form with Package Selection

1'use client';
2 
3import { useState } from 'react';
4import { Button } from '@/components/ui/button';
5import { Field, FieldDescription, FieldLabel } from '@/components/ui/field';
6import { Input } from '@/components/ui/input';
7import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
8import {
9  Select,
10  SelectContent,
11  SelectItem,
12  SelectTrigger,
13  SelectValue,
14} from '@/components/ui/select';
15import { Separator } from '@/components/ui/separator';
16 
17const workspaces = [
18  {
19    id: 1,
20    title: 'Starter',
21    description: 'Up to 10,000 requests per day.',
22    users: 'Free',
23  },
24  {
25    id: 2,
26    title: 'Premium',
27    description: '500,000 requests per day¹',
28    users: '$900/month²',
29  },
30  {
31    id: 3,
32    title: 'Enterprise',
33    description: 'Based on your specific needs',
34    users: 'Custom',
35  },
36];
37 
38export default function FormLayout04() {
39  const [selectedWorkspace, setSelectedWorkspace] = useState(workspaces[0]);
40 
41  return (
42    <div className="flex items-center justify-center p-10">
43      <div className="sm:mx-auto sm:max-w-2xl">
44        <h3 className="text-balance font-semibold text-foreground text-lg">
45          Apply for early access
46        </h3>
47        <p className="mt-1 text-pretty text-muted-foreground text-sm leading-6">
48          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
49          nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
50        </p>
51        <form action="#" className="mt-8" method="post">
52          <div className="grid grid-cols-1 gap-4 sm:grid-cols-6">
53            <div className="col-span-full sm:col-span-3">
54              <Field className="gap-2">
55                <FieldLabel htmlFor="first-name">
56                  First name<span className="text-red-500">*</span>
57                </FieldLabel>
58                <Input
59                  autoComplete="given-name"
60                  id="first-name"
61                  name="first-name"
62                  placeholder="Emma"
63                  required
64                  type="text"
65                />
66              </Field>
67            </div>
68            <div className="col-span-full sm:col-span-3">
69              <Field className="gap-2">
70                <FieldLabel htmlFor="last-name">Last name</FieldLabel>
71                <Input
72                  autoComplete="family-name"
73                  id="last-name"
74                  name="last-name"
75                  placeholder="Crown"
76                  type="text"
77                />
78// … truncated