Untitled
unknown
plain_text
a month ago
5.3 kB
4
Indexable
import { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Tooltip, TooltipProvider } from "@/components/ui/tooltip"; import { Switch } from "@/components/ui/switch"; import { Progress } from "@/components/ui/progress"; import { Checkbox } from "@/components/ui/checkbox"; import { RadioGroup, Radio } from "@/components/ui/radio"; import { ChevronDown, Info, Gift, ShoppingCart, Bell, Star, ShieldCheck, Lock, CheckCircle, XCircle } from "lucide-react"; export default function CartPromotions() { const [expanded, setExpanded] = useState(false); const [showPopup, setShowPopup] = useState(false); const [secureCheckout, setSecureCheckout] = useState(false); const [showSecureInfo, setShowSecureInfo] = useState(false); return ( <TooltipProvider> <div className="max-w-md mx-auto space-y-4"> {/* Variante 1: Toggle Switch */} <div className="flex items-center space-x-2 bg-gray-100 p-3 rounded-lg"> <Switch checked={secureCheckout} onCheckedChange={setSecureCheckout} /> <span>Secure your tickets and get 10% cashback if you don’t win.</span> <Tooltip> <Info className="text-gray-500 cursor-pointer" /> </Tooltip> </div> {/* Variante 2: Card Selectabil */} <Card onClick={() => setSecureCheckout(!secureCheckout)} className={secureCheckout ? "border-green-500" : "border-gray-300"}> <CardContent className="p-4 flex items-center space-x-2 cursor-pointer"> <ShieldCheck className={secureCheckout ? "text-green-500" : "text-gray-500"} /> <span>Secure Checkout - 10% Cashback</span> </CardContent> </Card> {/* Variante 3: Inline Button */} <Button variant={secureCheckout ? "secondary" : "outline"} onClick={() => setSecureCheckout(!secureCheckout)}> {secureCheckout ? "Secure Checkout Enabled" : "Add Secure Checkout"} </Button> {/* Variante 4: Pop-up Explicativ */} <div> <Button onClick={() => setShowSecureInfo(true)} variant="ghost">What is Secure Checkout?</Button> {showSecureInfo && ( <div className="absolute top-20 bg-white p-4 shadow-lg rounded-md w-64"> <p className="font-semibold">Secure Checkout Benefits:</p> <ul className="mt-2 text-sm space-y-1"> <li>✔ 10% Cashback if you don’t win</li> <li>✔ Extra security on your payment</li> </ul> <Button className="mt-3 w-full" onClick={() => setShowSecureInfo(false)}>Close</Button> </div> )} </div> {/* Variante 5: Checkbox */} <div className="flex items-center space-x-2 p-3 rounded-lg border"> <Checkbox checked={secureCheckout} onCheckedChange={setSecureCheckout} /> <span>Enable Secure Checkout (10% Cashback)</span> </div> {/* Variante 6: Radio Button Selection */} <RadioGroup value={secureCheckout ? "yes" : "no"} onValueChange={(val) => setSecureCheckout(val === "yes")}> <Radio value="yes">Enable Secure Checkout</Radio> <Radio value="no">Disable Secure Checkout</Radio> </RadioGroup> {/* Variante 7: Icon Label */} <div className="flex items-center space-x-2"> <Lock className="text-gray-500" /> <span className="cursor-pointer" onClick={() => setSecureCheckout(!secureCheckout)}> {secureCheckout ? "Secure Checkout Enabled" : "Enable Secure Checkout"} </span> </div> {/* Variante 8: Toggle Button */} <Button onClick={() => setSecureCheckout(!secureCheckout)} variant="ghost"> {secureCheckout ? <CheckCircle className="text-green-500" /> : <XCircle className="text-red-500" />} Secure Checkout </Button> {/* Variante 9: Dropdown Selection */} <div className="relative"> <Button onClick={() => setExpanded(!expanded)} variant="outline" className="w-full flex justify-between"> {secureCheckout ? "Secure Checkout Enabled" : "Enable Secure Checkout"} <ChevronDown /> </Button> {expanded && ( <div className="absolute w-full bg-white shadow-lg rounded-md mt-2"> <Button onClick={() => { setSecureCheckout(true); setExpanded(false); }} className="w-full">Enable Secure Checkout</Button> <Button onClick={() => { setSecureCheckout(false); setExpanded(false); }} className="w-full">Disable Secure Checkout</Button> </div> )} </div> {/* Variante 10: Progress Indicator */} <div className="p-3 rounded-lg bg-gray-100"> <span>Secure Checkout Progress</span> <Progress value={secureCheckout ? 100 : 0} className="mt-2" /> </div> {/* Buton de acțiune principal */} <Button className="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold"> PROCEED TO PLAY » </Button> </div> </TooltipProvider> ); }
Editor is loading...
Leave a Comment