Form with Plan Selection

1'use client';
2 
3import { Check, CircleCheck, ExternalLink } from 'lucide-react';
4import { useState } from 'react';
5import { Badge } from '@/components/ui/badge';
6import { Button } from '@/components/ui/button';
7import { Card, CardContent } from '@/components/ui/card';
8import { Field, FieldDescription, FieldLabel } from '@/components/ui/field';
9import { Input } from '@/components/ui/input';
10import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
11import {
12  Select,
13  SelectContent,
14  SelectItem,
15  SelectTrigger,
16  SelectValue,
17} from '@/components/ui/select';
18import { Separator } from '@/components/ui/separator';
19import { cn } from '@/lib/utils';
20 
21const highlights = [
22  {
23    id: 1,
24    feature: 'Used by top design teams worldwide',
25  },
26  {
27    id: 2,
28    feature: 'Seamless integration with design tools',
29  },
30  {
31    id: 3,
32    feature: 'Real-time collaboration features',
33  },
34];
35 
36const plans = [
37  {
38    name: 'Creator',
39    features: [
40      { feature: 'Up to 3 design projects' },
41      { feature: 'Basic collaboration tools' },
42      { feature: '5GB cloud storage' },
43      { feature: 'Community forum support' },
44    ],
45    price: '$15',
46    href: '#',
47    isRecommended: false,
48  },
49  {
50    name: 'Team',
51    features: [
52      { feature: 'Unlimited design projects' },
53      { feature: 'Advanced collaboration suite' },
54      { feature: '50GB cloud storage' },
55      { feature: 'Priority email support' },
56    ],
57    price: '$49',
58    href: '#',
59    isRecommended: true,
60  },
61  {
62    name: 'Agency',
63    features: [
64      { feature: 'Unlimited projects and team members' },
65      { feature: 'Client portal access' },
66      { feature: '250GB cloud storage' },
67      { feature: 'White-labeling options' },
68      { feature: 'Dedicated account manager' },
69    ],
70    price: '$99',
71    href: '#',
72    isRecommended: false,
73  },
74];
75 
76export default function FormLayout05() {
77  const [selected, setSelected] = useState(plans[0]);
78 
79  return (
80    <div className="flex items-center justify-center p-10">
81      <form className="sm:mx-auto sm:max-w-7xl">
82        <h3 className="text-balance font-semibold text-foreground text-xl">
83          Create new design workspace
84        </h3>
85        <div className="grid grid-cols-1 gap-10 lg:grid-cols-12 lg:gap-12">
86          <div className="mt-6 lg:col-span-7">
87            <div className="space-y-4 md:space-y-6">
88              <div className="md:flex md:items-center md:space-x-4">
89                <div className="md:w-1/4">
90// … truncated