{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-layout-05",
  "type": "registry:block",
  "title": "Form with Plan Selection",
  "description": "A form with plan selection block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "badge",
    "button",
    "card",
    "field",
    "input",
    "radio-group",
    "select",
    "separator"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/form-layout/form-layout-05.tsx",
      "type": "registry:component",
      "target": "components/form-layout-05.tsx",
      "content": "'use client';\n\nimport { Check, CircleCheck, ExternalLink } from 'lucide-react';\nimport { useState } from 'react';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Field, FieldDescription, FieldLabel } from '@/components/ui/field';\nimport { Input } from '@/components/ui/input';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\nimport { Separator } from '@/components/ui/separator';\nimport { cn } from '@/lib/utils';\n\nconst highlights = [\n  {\n    id: 1,\n    feature: 'Used by top design teams worldwide',\n  },\n  {\n    id: 2,\n    feature: 'Seamless integration with design tools',\n  },\n  {\n    id: 3,\n    feature: 'Real-time collaboration features',\n  },\n];\n\nconst plans = [\n  {\n    name: 'Creator',\n    features: [\n      { feature: 'Up to 3 design projects' },\n      { feature: 'Basic collaboration tools' },\n      { feature: '5GB cloud storage' },\n      { feature: 'Community forum support' },\n    ],\n    price: '$15',\n    href: '#',\n    isRecommended: false,\n  },\n  {\n    name: 'Team',\n    features: [\n      { feature: 'Unlimited design projects' },\n      { feature: 'Advanced collaboration suite' },\n      { feature: '50GB cloud storage' },\n      { feature: 'Priority email support' },\n    ],\n    price: '$49',\n    href: '#',\n    isRecommended: true,\n  },\n  {\n    name: 'Agency',\n    features: [\n      { feature: 'Unlimited projects and team members' },\n      { feature: 'Client portal access' },\n      { feature: '250GB cloud storage' },\n      { feature: 'White-labeling options' },\n      { feature: 'Dedicated account manager' },\n    ],\n    price: '$99',\n    href: '#',\n    isRecommended: false,\n  },\n];\n\nexport default function FormLayout05() {\n  const [selected, setSelected] = useState(plans[0]);\n\n  return (\n    <div className=\"flex items-center justify-center p-10\">\n      <form className=\"sm:mx-auto sm:max-w-7xl\">\n        <h3 className=\"text-balance font-semibold text-foreground text-xl\">\n          Create new design workspace\n        </h3>\n        <div className=\"grid grid-cols-1 gap-10 lg:grid-cols-12 lg:gap-12\">\n          <div className=\"mt-6 lg:col-span-7\">\n            <div className=\"space-y-4 md:space-y-6\">\n              <div className=\"md:flex md:items-center md:space-x-4\">\n                <div className=\"md:w-1/4\">\n                  <Field className=\"gap-2\">\n                    <FieldLabel htmlFor=\"organization\">Organization</FieldLabel>\n                    <Select\n                      defaultValue=\"1\"\n                      items={{\n                        '1': 'Acme, Inc.',\n                        '2': 'Hero Labs',\n                        '3': 'Rose Holding',\n                      }}\n                    >\n                      <SelectTrigger\n                        className=\"w-full\"\n                        id=\"organization\"\n                        name=\"organization\"\n                      >\n                        <SelectValue placeholder=\"Select organization\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"1\">Acme, Inc.</SelectItem>\n                        <SelectItem value=\"2\">Hero Labs</SelectItem>\n                        <SelectItem value=\"3\">Rose Holding</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </Field>\n                </div>\n                <div className=\"mt-4 md:mt-0 md:w-3/4\">\n                  <Field className=\"gap-2\">\n                    <FieldLabel htmlFor=\"workspace\">Workspace name</FieldLabel>\n                    <Input id=\"workspace\" name=\"workspace\" />\n                  </Field>\n                </div>\n              </div>\n              <div>\n                <Field className=\"gap-2\">\n                  <FieldLabel htmlFor=\"region\">Region</FieldLabel>\n                  <Select\n                    defaultValue=\"iad1\"\n                    items={{\n                      fra1: 'eu-central-1 (Frankfurt, Germany)',\n                      iad1: 'us-east-1 (Washington, D.C., USA)',\n                      lhr1: 'eu-west-2 (London, United Kingdom)',\n                      sfo1: 'us-west-1 (San Francisco, USA)',\n                      sin1: 'ap-southeast-1 (Singapore)',\n                    }}\n                  >\n                    <SelectTrigger id=\"region\" name=\"region\">\n                      <SelectValue placeholder=\"Select region\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"fra1\">\n                        eu-central-1 (Frankfurt, Germany)\n                      </SelectItem>\n                      <SelectItem value=\"iad1\">\n                        us-east-1 (Washington, D.C., USA)\n                      </SelectItem>\n                      <SelectItem value=\"lhr1\">\n                        eu-west-2 (London, United Kingdom)\n                      </SelectItem>\n                      <SelectItem value=\"sfo1\">\n                        us-west-1 (San Francisco, USA)\n                      </SelectItem>\n                      <SelectItem value=\"sin1\">\n                        ap-southeast-1 (Singapore)\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                  <FieldDescription>\n                    For best performance, choose a region closest to your\n                    operations\n                  </FieldDescription>\n                </Field>\n              </div>\n            </div>\n            <h4 className=\"mt-14 text-balance font-medium\">\n              Plan type<span className=\"text-red-500\">*</span>\n            </h4>\n            <RadioGroup\n              className=\"mt-4 space-y-4\"\n              onValueChange={(value) =>\n                setSelected(\n                  plans.find((plan) => plan.name === value) || plans[0]\n                )\n              }\n              value={selected.name}\n            >\n              {plans.map((plan) => (\n                <label\n                  className={cn(\n                    'relative block cursor-pointer rounded-md border bg-background transition',\n                    selected.name === plan.name\n                      ? 'border-primary/20 ring-2 ring-primary/20'\n                      : 'border-border'\n                  )}\n                  htmlFor={plan.name}\n                  key={plan.name}\n                >\n                  <div className=\"flex items-start space-x-4 px-6 py-4\">\n                    <div className=\"mt-1 flex h-4 w-4 shrink-0 items-center justify-center\">\n                      <RadioGroupItem id={plan.name} value={plan.name} />\n                    </div>\n                    <div className=\"w-full\">\n                      <p className=\"text-pretty leading-6\">\n                        <span className=\"font-semibold text-foreground\">\n                          {plan.name}\n                        </span>\n                        {plan.isRecommended && (\n                          <Badge className=\"ml-2\" variant=\"secondary\">\n                            recommended\n                          </Badge>\n                        )}\n                      </p>\n                      <ul className=\"mt-2 space-y-1\">\n                        {plan.features.map((feature, index) => (\n                          <li\n                            className=\"flex items-center gap-2 text-sm\"\n                            key={index}\n                          >\n                            <Check\n                              aria-hidden={true}\n                              className=\"h-4 w-4 text-muted-foreground\"\n                            />\n                            {feature.feature}\n                          </li>\n                        ))}\n                      </ul>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center justify-between rounded-b-md border-border border-t bg-muted px-6 py-3\">\n                    <a\n                      className=\"inline-flex items-center gap-1 text-primary text-sm hover:underline hover:underline-offset-4\"\n                      href={plan.href}\n                    >\n                      Learn more\n                      <ExternalLink aria-hidden={true} className=\"h-4 w-4\" />\n                    </a>\n                    <div>\n                      <span className=\"font-semibold text-foreground text-lg\">\n                        {plan.price}\n                      </span>\n                      <span className=\"text-muted-foreground text-sm\">/mo</span>\n                    </div>\n                  </div>\n                </label>\n              ))}\n            </RadioGroup>\n          </div>\n          <div className=\"lg:col-span-5\">\n            <Card className=\"bg-muted shadow-none\">\n              <CardContent>\n                <h4 className=\"text-balance font-semibold text-foreground text-sm\">\n                  Choose the right plan for your design team\n                </h4>\n                <p className=\"mt-2 text-pretty text-muted-foreground text-sm leading-6\">\n                  Our flexible plans are designed to scale with your team&apos;s\n                  needs. All plans include core design collaboration features\n                  with varying levels of storage and support.\n                </p>\n                <ul className=\"mt-4 space-y-1\">\n                  {highlights.map((item) => (\n                    <li\n                      className=\"flex items-center space-x-2 py-1.5 text-foreground\"\n                      key={item.id}\n                    >\n                      <CircleCheck className=\"h-5 w-5 text-primary\" />\n                      <span className=\"truncate text-sm\">{item.feature}</span>\n                    </li>\n                  ))}\n                </ul>\n                <a\n                  className=\"mt-4 inline-flex items-center gap-1 text-primary text-sm\"\n                  href=\"#\"\n                >\n                  Learn more\n                  <ExternalLink aria-hidden={true} className=\"h-4 w-4\" />\n                </a>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n        <Separator className=\"my-10\" />\n        <div className=\"flex items-center justify-end space-x-4\">\n          <Button type=\"button\" variant=\"ghost\">\n            Cancel\n          </Button>\n          <Button type=\"submit\">Update</Button>\n        </div>\n      </form>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "form-layout"
  ]
}