Spaces:
Sleeping
Sleeping
File size: 2,069 Bytes
9a43362 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 'use client';
import { useState } from 'react';
import type { Template, Variant } from '@/types/carousel';
import { getTemplate } from '@/types/carousel';
interface VariantSwitcherProps {
template: Template;
activeVariant: Variant;
onSwitch: (variant: Variant) => void;
}
export default function VariantSwitcher({ template, activeVariant, onSwitch }: VariantSwitcherProps): React.ReactElement {
const [showDetails, setShowDetails] = useState(false);
const templateConfig = getTemplate(template);
if (!templateConfig) return <div>Invalid template</div>;
return (
<div className="space-y-2">
<div className="flex items-center justify-between">
<label className="text-xs font-medium text-gray-600">Design Variant</label>
<button
onClick={() => setShowDetails(!showDetails)}
className="text-xs text-blue-600 hover:text-blue-700"
>
{showDetails ? 'Hide details' : 'Show details'}
</button>
</div>
<div className="flex items-center gap-2 bg-gray-100 rounded-lg p-1 w-fit">
{templateConfig.variants.map((v) => (
<button
key={v.id}
onClick={() => onSwitch(v.id)}
className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
activeVariant === v.id
? 'bg-white text-gray-900 shadow-sm'
: 'text-gray-500 hover:text-gray-700'
}`}
title={v.description}
>
{v.name}
</button>
))}
</div>
{showDetails && (
<div className="bg-blue-50 rounded-lg p-3 border border-blue-200">
{templateConfig.variants.find(v => v.id === activeVariant) && (
<p className="text-xs text-blue-900">
<span className="font-semibold">{templateConfig.variants.find(v => v.id === activeVariant)?.name}:</span>{' '}
{templateConfig.variants.find(v => v.id === activeVariant)?.description}
</p>
)}
</div>
)}
</div>
);
}
|