Tipping Screen - Copy this React, Tailwind Component to your project

Import React, { useState } from 'react'; import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; const TippingScreen = () => { const [selectedTip, setSelectedTip] = useState(null); const [customTip, setCustomTip] = useState(''); const tipOptions = [ { percentage: 15, description: "Good service Help us keep the coffee flowing!" }, { percentage: 18, description: "Great service Fund our barista's latte art classes!" }, { percentage: 20, description: "Exceptional service Contribute to our 'Better Beans' fund!" }, { percentage: 25, description: "Outstanding service Sponsor our 'Free Coffee Fridays'!" } ]; const handleTipSelection = (percentage) => { setSelectedTip(percentage); setCustomTip(''); }; const handleCustomTipChange = (e) => { setCustomTip(e.target.value); setSelectedTip(null); }; const handleSubmit = () => { // Handle the tip submission logic here console.log("Tip submitted:", selectedTip || customTip); }; return ( <Card className="w full max w md mx auto"> <CardHeader> <CardTitle className="text 2xl font bold text center">Thank You for Visiting Our Coffee Shop!</CardTitle> </CardHeader> <CardContent> <p className="text center mb 4">Your support helps us serve better coffee and create a wonderful experience for all our customers.</p> <div className="grid grid cols 2 gap 4 mb 4"> {tipOptions.map((option) => ( <Button key={option.percentage} onClick={() => handleTipSelection(option.percentage)} variant={selectedTip === option.percentage ? "default" : "outline"} className="h auto py 2" > <div> <div className="font bold">{option.percentage}%</div> <div className="text xs mt 1">{option.description}</div> </div> </Button> ))} </div> <div className="flex items center justify center"> <input type="number" placeholder="Custom %" value={customTip} onChange={handleCustomTipChange} className="border rounded p 2 w 24 text center" /> </div> </CardContent> <CardFooter> <Button onClick={handleSubmit} className="w full"> Confirm Tip </Button> </CardFooter> </Card> ); }; export default TippingScreen;