Spaces:
Running
Running
File size: 1,828 Bytes
08dfd47 abd8f45 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 |
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
selectedVariant: string
setSelectedVariant: (v: string) => void
variantKeys: string[]
}
const ExampleVariantToggle: React.FC<ExampleVariantToggleProps> = ({
toggleMode,
setToggleMode,
selectedVariant,
setSelectedVariant,
variantKeys,
}) => {
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>
)
}
export default ExampleVariantToggle
|