Spaces:
Running
Running
File size: 2,922 Bytes
08dfd47 |
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 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
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
|