Styled Card - Copy this React, Mui Component to your project

use this: I also what it to look like this: import React, { useState } from "react"; import { FiCopy, FiCheck } from "react icons/fi"; import { MdDiscount } from "react icons/md"; const ViewAllCoupons = () => { const [copiedCode, setCopiedCode] = useState(null); const coupons = [ { id: 1, code: "SUMMER2024", discountType: "percentage", value: 20, expirationDate: "2024 08 31", description: "Summer Special Discount", image: "https://images.unsplash.com/photo 1607082348824 0a96f2a4b9da" }, { id: 2, code: "SAVE50NOW", discountType: "fixed", value: 50, expirationDate: "2024 06 30", description: "Flat Discount on Electronics", image: "https://images.unsplash.com/photo 1607082349566 187342175e2f" }, { id: 3, code: "FLASH25", discountType: "percentage", value: 25, expirationDate: "2024 05 15", description: "Flash Sale Special", image: "https://images.unsplash.com/photo 1607082350899 7e105aa886ae" } ]; const handleCopyCode = async (code) => { try { await navigator.clipboard.writeText(code); setCopiedCode(code); setTimeout(() => setCopiedCode(null), 2000); } catch (err) { console.error("Failed to copy code:", err); } }; const formatDate = (dateString) => { return new Date(dateString).toLocaleDateString("en US", { year: "numeric", month: "long", day: "numeric" }); }; return ( <div className="min h screen bg gray 100 py 12 px 4 sm:px 6 lg:px 8"> <div className="max w 7xl mx auto"> <div className="text center mb 12"> <h1 className="text 4xl font bold text gray 900 mb 4">Available Coupons</h1> <p className="text lg text gray 600">Save big with these exclusive discount codes!</p> </div> <div className="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 6"> {coupons.map((coupon) => ( <div key={coupon.id} className="bg white rounded xl shadow lg overflow hidden hover:shadow xl transition shadow duration 300" > <div className="relative h 48 overflow hidden"> <img src={coupon.image} alt={coupon.description} className="w full h full object cover" onError={(e) => { e.target.src = "https://images.unsplash.com/photo 1472851294608 062f824d29cc"; }} /> <div className="absolute top 0 right 0 bg blue 600 text white px 4 py 2 rounded bl lg"> <MdDiscount className="inline block mr 1" /> {coupon.discountType === "percentage" ? `${coupon.value}%` : `$${coupon.value}`} </div> </div> <div className="p 6"> <div className="font bold text xl mb 2">{coupon.description}</div> <div className="mb 4"> <p className="text gray 600">Expires: {formatDate(coupon.expirationDate)}</p> </div> <div className="flex items center justify between bg gray 100 rounded lg p 3 mb 4"> <code className="text lg font mono font semibold text gray 800"> {coupon.code} </code> <button onClick={() => handleCopyCode(coupon.code)} className="flex items center space x 2 bg blue 600 hover:bg blue 700 text white px 4 py 2 rounded lg transition colors duration 200" aria label="Copy coupon code" > {copiedCode === coupon.code ? ( <> <FiCheck className="w 5 h 5" /> <span>Copied!</span> </> ) : ( <> <FiCopy className="w 5 h 5" /> <span>Copy Code</span> </> )} </button> </div> <p className="text sm text gray 500"> {coupon.discountType === "percentage" ? `Get ${coupon.value}% off your purchase` : `Save $${coupon.value} on your order`} </p> </div> </div> ))} </div> </div> </div> ); }; export default ViewAllCoupons;