Spaces:
Running
Running
import React from 'react' | |
export function handleVariantToggleClick( | |
toggleMode: 'wmd' | 'attacked', | |
selectedVariant: string, | |
setSelectedVariant: (v: string) => void, | |
variantKeys: string[] | |
) { | |
if (toggleMode === 'wmd') { | |
if (selectedVariant === 'original' && variantKeys.includes('wmd')) { | |
setSelectedVariant('wmd') | |
} else { | |
setSelectedVariant('original') | |
} | |
} else if (toggleMode === 'attacked') { | |
if (selectedVariant === 'original' && variantKeys.includes('attacked')) { | |
setSelectedVariant('attacked') | |
} else { | |
setSelectedVariant('original') | |
} | |
} else { | |
setSelectedVariant('original') | |
} | |
} | |
interface ExampleVariantToggleProps { | |
toggleMode: 'wmd' | 'attacked' | |
setToggleMode: (mode: 'wmd' | 'attacked') => void | |
type?: 'radio' | 'button' | |
selectedVariant: string | |
setSelectedVariant: (v: string) => void | |
variantKeys: string[] | |
} | |
const ExampleVariantToggle: React.FC<ExampleVariantToggleProps> = ({ | |
toggleMode, | |
setToggleMode, | |
type = 'radio', | |
selectedVariant, | |
setSelectedVariant, | |
variantKeys, | |
}) => { | |
if (type === 'button') { | |
return ( | |
<div className="my-2 flex gap-6"> | |
<button | |
className={`btn ${toggleMode === 'wmd' ? 'btn-primary' : 'btn-outline'}`} | |
type="button" | |
onClick={() => { | |
setToggleMode('wmd') | |
handleVariantToggleClick(toggleMode, selectedVariant, setSelectedVariant, variantKeys) | |
}} | |
> | |
Original β Watermarked | |
</button> | |
<button | |
className={`btn ${toggleMode === 'attacked' ? 'btn-primary' : 'btn-outline'}`} | |
type="button" | |
onClick={() => { | |
setToggleMode('attacked') | |
handleVariantToggleClick(toggleMode, selectedVariant, setSelectedVariant, variantKeys) | |
}} | |
> | |
Original β Attacked | |
</button> | |
</div> | |
) | |
} | |
// Default radio mode | |
return ( | |
<fieldset className="fieldset w-full p-4 rounded border border-gray-700 bg-base-200 mb-4"> | |
<legend className="fieldset-legend font-semibold">Click Toggle</legend> | |
<div className="mb-2 flex gap-6"> | |
<label className="flex items-center gap-2 cursor-pointer"> | |
<input | |
type="radio" | |
name="variant-toggle" | |
value="wmd" | |
checked={toggleMode === 'wmd'} | |
onChange={() => setToggleMode('wmd')} | |
/> | |
<span>Original β Watermarked</span> | |
</label> | |
<label className="flex items-center gap-2 cursor-pointer"> | |
<input | |
type="radio" | |
name="variant-toggle" | |
value="attacked" | |
checked={toggleMode === 'attacked'} | |
onChange={() => setToggleMode('attacked')} | |
/> | |
<span>Original β Attacked</span> | |
</label> | |
</div> | |
</fieldset> | |
) | |
} | |
export default ExampleVariantToggle | |