کارت رادیو (Radio Card)

import { RadioCards, RadioCardItem, RadioCardTitle, RadioCardDescription } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <RadioCards defaultValue="1" dir="rtl" className="grid-cols-1 sm:grid-cols-3 gap-3">
      <RadioCardItem value="1">
        <div className="flex flex-col gap-1 text-start">
          <RadioCardTitle>پردازنده ۸ هسته‌ای</RadioCardTitle>
          <RadioCardDescription>۳۲ گیگابایت رم</RadioCardDescription>
        </div>
      </RadioCardItem>
      <RadioCardItem value="2">
        <div className="flex flex-col gap-1 text-start">
          <RadioCardTitle>پردازنده ۶ هسته‌ای</RadioCardTitle>
          <RadioCardDescription>۲۴ گیگابایت رم</RadioCardDescription>
        </div>
      </RadioCardItem>
      <RadioCardItem value="3">
        <div className="flex flex-col gap-1 text-start">
          <RadioCardTitle>پردازنده ۴ هسته‌ای</RadioCardTitle>
          <RadioCardDescription>۱۶ گیگابایت رم</RadioCardDescription>
        </div>
      </RadioCardItem>
    </RadioCards>
  )
}

<RadioCards defaultValue="1" dir="ltr" className="grid-cols-1 sm:grid-cols-3 gap-3">
  <RadioCardItem value="1">
    <div className="flex flex-col gap-1 text-start">
      <RadioCardTitle>8-core CPU</RadioCardTitle>
      <RadioCardDescription>32 GB RAM</RadioCardDescription>
    </div>
  </RadioCardItem>
  <RadioCardItem value="2">
    <div className="flex flex-col gap-1 text-start">
      <RadioCardTitle>6-core CPU</RadioCardTitle>
      <RadioCardDescription>24 GB RAM</RadioCardDescription>
    </div>
  </RadioCardItem>
  <RadioCardItem value="3">
    <div className="flex flex-col gap-1 text-start">
      <RadioCardTitle>4-core CPU</RadioCardTitle>
      <RadioCardDescription>16 GB RAM</RadioCardDescription>
    </div>
  </RadioCardItem>
</RadioCards>

<RadioCards defaultValue="yearly" dir="rtl" className="grid-cols-2 gap-3">
  <RadioCardItem value="monthly" className="justify-center items-center min-h-[60px]">
    <RadioCardTitle>ماهانه</RadioCardTitle>
  </RadioCardItem>
  <RadioCardItem value="yearly" className="justify-center items-center min-h-[60px]">
    <RadioCardTitle>سالانه</RadioCardTitle>
  </RadioCardItem>
</RadioCards>

<RadioCards defaultValue="yearly" dir="ltr" className="grid-cols-2 gap-3">
  <RadioCardItem value="monthly" className="justify-center items-center min-h-[60px]">
    <RadioCardTitle>Monthly</RadioCardTitle>
  </RadioCardItem>
  <RadioCardItem value="yearly" className="justify-center items-center min-h-[60px]">
    <RadioCardTitle>Yearly</RadioCardTitle>
  </RadioCardItem>
</RadioCards>

import { Icons } from '@parto-system-design/ui'
;<RadioCards defaultValue="team" dir="rtl" className="grid-cols-1 sm:grid-cols-3 gap-3">
  <RadioCardItem value="starter">
    <div className="flex flex-col gap-1.5 text-start">
      <div className="flex items-center gap-2">
        <Icons.user className="h-4 w-4 text-brand shrink-0" />
        <RadioCardTitle>پایه</RadioCardTitle>
      </div>
      <RadioCardDescription>مناسب برای افراد و پروژه‌های کوچک</RadioCardDescription>
    </div>
  </RadioCardItem>
  <RadioCardItem value="team">
    <div className="flex flex-col gap-1.5 text-start">
      <div className="flex items-center gap-2">
        <Icons.users className="h-4 w-4 text-brand shrink-0" />
        <RadioCardTitle>تیمی</RadioCardTitle>
      </div>
      <RadioCardDescription>مناسب برای تیم‌های کوچک تا متوسط</RadioCardDescription>
    </div>
  </RadioCardItem>
  <RadioCardItem value="enterprise">
    <div className="flex flex-col gap-1.5 text-start">
      <div className="flex items-center gap-2">
        <Icons.building className="h-4 w-4 text-brand shrink-0" />
        <RadioCardTitle>سازمانی</RadioCardTitle>
      </div>
      <RadioCardDescription>مناسب برای سازمان‌ها و شرکت‌های بزرگ</RadioCardDescription>
    </div>
  </RadioCardItem>
</RadioCards>

const [plan, setPlan] = React.useState('team')

;<RadioCards value={plan} onValueChange={setPlan}>
  <RadioCardItem value="starter">
    <RadioCardTitle>پایه</RadioCardTitle>
  </RadioCardItem>
  <RadioCardItem value="team">
    <RadioCardTitle>تیمی</RadioCardTitle>
  </RadioCardItem>
  <RadioCardItem value="enterprise">
    <RadioCardTitle>سازمانی</RadioCardTitle>
  </RadioCardItem>
</RadioCards>

<RadioCards defaultValue="1" dir="rtl" className="grid-cols-2 gap-3">
  <RadioCardItem value="1" className="justify-center items-center min-h-[60px]">
    <RadioCardTitle>فعال</RadioCardTitle>
  </RadioCardItem>
  <RadioCardItem value="2" disabled className="justify-center items-center min-h-[60px]">
    <RadioCardTitle>غیرفعال</RadioCardTitle>
  </RadioCardItem>
</RadioCards>

<RadioCards defaultValue="1" className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
  {/* items */}
</RadioCards>