|
| 1 | +import { useIsMobile } from "@/hooks/use-mobile" |
1 | 2 | import { ChoiceAttributeType } from "@/lib/Types" |
2 | 3 | import { formatNumberSeperator } from "@/lib/utils" |
3 | | -import { CheckCircle, Circle } from "lucide-react" |
| 4 | +import { CheckCircle, Circle, Square, CheckSquare } from "lucide-react" |
4 | 5 |
|
5 | 6 | export default function ChoiceAttribute({ attribute }: { attribute: ChoiceAttributeType }) { |
| 7 | + |
| 8 | + const isMobile = useIsMobile(); |
| 9 | + |
6 | 10 | return ( |
7 | 11 | <div className="flex flex-col gap-1"> |
8 | 12 | <div className="flex items-center gap-2"> |
9 | | - <span className="font-bold">{attribute.Type}-select</span> |
10 | | - {attribute.DefaultValue !== null && attribute.DefaultValue !== -1 && ( |
11 | | - <span className="text-xs bg-green-100 text-green-700 px-1.5 py-0.5 rounded-full flex items-center gap-1"> |
12 | | - <CheckCircle className="w-3 h-3" /> |
| 13 | + <span className="font-semibold text-xs md:font-bold md:text-sm">{attribute.Type}-select</span> |
| 14 | + {attribute.DefaultValue !== null && attribute.DefaultValue !== -1 && !isMobile && ( |
| 15 | + <span className="text-xs bg-green-100 text-green-700 px-1 py-0.5 rounded-full flex items-center gap-1 md:px-1.5"> |
| 16 | + <CheckCircle className="w-2 h-2 md:w-3 md:h-3" /> |
13 | 17 | Default: {attribute.Options.find(o => o.Value === attribute.DefaultValue)?.Name} |
14 | 18 | </span> |
15 | 19 | )} |
16 | 20 | </div> |
17 | 21 | <div className="space-y-1"> |
18 | 22 | {attribute.Options.map(option => ( |
19 | 23 | <div key={option.Value}> |
20 | | - <div className="flex items-center justify-between py-1"> |
| 24 | + <div className="flex items-center justify-between py-0.5 md:py-1"> |
21 | 25 | <div className="flex items-center gap-2"> |
22 | 26 | <div className="flex items-center gap-1"> |
23 | | - {option.Value === attribute.DefaultValue ? ( |
24 | | - <CheckCircle className="w-3 h-3 text-green-600" /> |
| 27 | + {attribute.Type === "Multi" ? ( |
| 28 | + // For multi-select, show checkboxes |
| 29 | + option.Value === attribute.DefaultValue ? ( |
| 30 | + <CheckSquare className="w-2 h-2 text-green-600 md:w-3 md:h-3" /> |
| 31 | + ) : ( |
| 32 | + <Square className="w-2 h-2 text-gray-400 md:w-3 md:h-3" /> |
| 33 | + ) |
25 | 34 | ) : ( |
26 | | - <Circle className="w-3 h-3 text-gray-400" /> |
| 35 | + // For single-select, show radio buttons |
| 36 | + option.Value === attribute.DefaultValue ? ( |
| 37 | + <CheckCircle className="w-2 h-2 text-green-600 md:w-3 md:h-3" /> |
| 38 | + ) : ( |
| 39 | + <Circle className="w-2 h-2 text-gray-400 md:w-3 md:h-3" /> |
| 40 | + ) |
27 | 41 | )} |
28 | | - <span className="text-sm">{option.Name}</span> |
| 42 | + <span className="text-xs md:text-sm">{option.Name}</span> |
29 | 43 | </div> |
30 | 44 | {option.Color && ( |
31 | 45 | <div |
32 | | - className="w-3 h-3 rounded-full border border-gray-300 shadow-sm" |
| 46 | + className="w-2 h-2 rounded-full border border-gray-300 shadow-sm md:w-3 md:h-3" |
33 | 47 | style={{ backgroundColor: option.Color }} |
34 | 48 | title={`Color: ${option.Color}`} |
35 | 49 | /> |
36 | 50 | )} |
37 | 51 | </div> |
38 | 52 | <div className="flex items-center gap-2"> |
39 | | - <span className="text-xs bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded font-mono"> |
| 53 | + <span className="text-xs bg-gray-200 text-gray-700 px-1 py-0.5 rounded font-mono md:px-1.5"> |
40 | 54 | {formatNumberSeperator(option.Value)} |
41 | 55 | </span> |
42 | 56 | </div> |
43 | 57 | </div> |
44 | 58 | {option.Description && ( |
45 | | - <div className="text-xs text-gray-600 italic pl-6 break-words"> |
| 59 | + <div className="text-xs text-gray-600 italic pl-4 break-words md:pl-6"> |
46 | 60 | {option.Description} |
47 | 61 | </div> |
48 | 62 | )} |
|
0 commit comments