File size: 3,113 Bytes
ddaefb9 | 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 101 102 | import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { useState } from "react"
export function Card2() {
const [name, setName] = useState("")
const [framework, setFramework] = useState("")
const handleSubmit = (e) => {
e.preventDefault()
alert(
`💀 You chose to "${framework}" for project "${name}". Absolute legend.`
)
}
return (
<Card className="w-[350px]">
<CardHeader>
<CardTitle>Create cursed project</CardTitle>
<CardDescription>Pick your favorite nasty action</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit}>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<Label htmlFor="name">Project Name</Label>
<Input
id="name"
placeholder="e.g. 'Smelly Adventure'"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className="flex flex-col space-y-1.5">
<Label htmlFor="framework">Action</Label>
<Select
value={framework}
onValueChange={(value) => setFramework(value)}
>
<SelectTrigger id="framework">
<SelectValue placeholder="Select your nastiness" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Smell Pussy" className="hover:bg-pink-100">
👃 Smell Pussy
</SelectItem>
<SelectItem value="Lick Ass" className="hover:bg-amber-100">
👅 Lick Ass
</SelectItem>
<SelectItem
value="Smell Armpit"
className="hover:bg-yellow-100"
>
🤢 Smell Armpit
</SelectItem>
<SelectItem value="Sniff Fart" className="hover:bg-green-100">
💨 Sniff Fart
</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<CardFooter className="flex justify-between mt-4 p-0 pt-6">
<Button
variant="outline"
onClick={() => {
setName("")
setFramework("")
}}
>
Nope
</Button>
<Button
type="submit"
disabled={!name || !framework}
className="bg-purple-600 hover:bg-purple-700"
>
Commit War Crime
</Button>
</CardFooter>
</form>
</CardContent>
</Card>
)
}
|