import { Field, Label, Radio, RadioGroup } from "@headlessui/react";
import { useState } from "react";
const plans = [
  "Developing",
  "Designing",
  "Coding",
  "Graphics Design",
  "Accounting",
  "Frontend",
];

const MainRadioGroupCode = () => {
   const [selected, setSelected] = useState(plans[0]);
  return (
    <>
    <div className="mt-4">
      <RadioGroup
          value={selected}
          onChange={setSelected}
          
          aria-label="Server size"
          className="flex flex-col gap-3"
        >
          {plans.map((plan) => (
            <Field key={plan} className="flex items-center gap-3">
              <Radio
                value={plan}
                className="group cursor-pointer flex size-5 items-center justify-center rounded-full border border-ld bg-white dark:bg-transparent data-checked:bg-primary dark:data-checked:bg-primary outline-0"
              >
                <span className="invisible size-2 rounded-full bg-white group-data-checked:visible" />
              </Radio>
              <Label className="text-sm text-ld cursor-pointer">{plan}</Label>
            </Field>
          ))}
        </RadioGroup>
    </div>
    </>
  );
};

export default MainRadioGroupCode;

import {
  Description,
  Field,
  Label,
  Radio,
  RadioGroup,
} from "@headlessui/react";
import { useState } from "react";
const plans = [
  { name: "Startup", description: "12GB, 6 CPUs, 256GB SSD disk" },
  { name: "Business", description: "16GB, 8 CPUs, 512GB SSD disk" },
  { name: "Enterprise", description: "32GB, 12 CPUs, 1TB SSD disk" },
];

const RadioGroupWithDescCode = () => {
  const [selected, setSelected] = useState(plans[0]);
  return (
    <>
    <div className="mt-4">
      <RadioGroup
          value={selected}
          onChange={setSelected}
          aria-label="Server size"
          className="flex flex-col gap-3"
        >
          {plans.map((plan) => (
            <Field key={plan.name} className="flex items-center gap-3 bg-lightgray dark:bg-dark py-2 px-4 rounded-md ">
              <Radio
                value={plan}
                className="group cursor-pointer flex size-5 items-center justify-center rounded-full border border-ld bg-white dark:bg-transparent data-checked:bg-primary dark:data-checked:bg-primary outline-0"
              >
                <span className="invisible size-2 rounded-full bg-white group-data-checked:visible " />
              </Radio>
              <div >
                <Label className="text-ld cursor-pointer">{plan.name}</Label>
                <Description className="text-bodytext text-xs">
                  {plan.description}
                </Description>
              </div>
            </Field>
          ))}
        </RadioGroup>
    </div>
    </>
  )
}

export default RadioGroupWithDescCode

import { useState } from 'react'
import { Icon } from "@iconify/react";
import { Radio, RadioGroup } from '@headlessui/react';

const plans = [
  { name: 'Startup', ram: '12GB', cpus: '6 CPUs', disk: '256GB SSD disk' },
  { name: 'Business', ram: '16GB', cpus: '8 CPUs', disk: '512GB SSD disk' },
  { name: 'Enterprise', ram: '32GB', cpus: '12 CPUs', disk: '1TB SSD disk' },
]

const BasicRadioGroupCode = () => {
  const [selected, setSelected] = useState(plans[0])
  return (
    <>
    <div className="mt-4">
        <div className="mx-auto w-full">
        <RadioGroup value={selected} onChange={setSelected} aria-label="Server size" className="space-y-4" >
          {plans.map((plan) => (
            <Radio
              key={plan.name}
              value={plan}
              className="group relative flex cursor-pointer rounded-md bg-lightgray dark:bg-dark py-4 px-5 text-ld shadow-md transition focus:outline-hidden data-focus:outline-1 data-focus:outline-primary data-checked:bg-primary dark:data-checked:bg-primary"
            >
              <div className="flex w-full items-center justify-between">
                <div className="text-sm">
                  <p className="font-semibold text-ld text-base group-data-checked:text-white">{plan.name}</p>
                  <div className="flex gap-2 text-bodytext text-sm group-data-checked:text-white/50">
                    <div>{plan.ram}</div>
                    <div aria-hidden="true">&middot;</div>
                    <div>{plan.cpus}</div>
                    <div aria-hidden="true">&middot;</div>
                    <div>{plan.disk}</div>
                  </div>
                </div>
                
                <Icon icon="solar:check-circle-linear" height={20} className="opacity-0 transition group-data-checked:opacity-100 text-white"/>
              </div>
            </Radio>
          ))}
        </RadioGroup>
      </div>
    </div>
    </>
  );
};

export default BasicRadioGroupCode;

import {
  Field,
  Label,
  Radio,
  RadioGroup,
} from "@headlessui/react";
import { useState } from "react";
const plans = [
  "Developing",
  "Designing",
  "Coding",
  "Graphics Design",
  "Accounting",
  "Frontend",
  "Seo",
];


const WithHtmlRadioFormCode = () => {
  const [selected, setSelected] = useState(plans[0]);
  return (
    <>
    <div className="mt-4">
      <form action="/plans" method="post">
          <RadioGroup
            value={selected}
            onChange={setSelected}
            aria-label="Server size"
            className="flex flex-col gap-3"
          >
            {plans.map((plan) => (
              <Field key={plan} className="flex items-center gap-3">
                <Radio
                  value={plan}
                  className="group cursor-pointer flex size-5 items-center justify-center rounded-full border border-ld bg-white dark:bg-transparent data-checked:bg-primary dark:data-checked:bg-primary outline-0"
                >
                  <span className="invisible size-2 rounded-full bg-white group-data-checked:visible" />
                </Radio>
                <Label className="text-sm text-ld cursor-pointer">{plan}</Label>
              </Field>
            ))}
          </RadioGroup>
          <div className="flex gap-3 mt-4">
            <button className="ui-button bg-primary">Submit</button>
            <button className="ui-button bg-error">Cancel</button>
          </div>
        </form>
    </div>
    </>
  )
}

export default WithHtmlRadioFormCode