Components
Loading preview...
RedeemDialog A modal dialog that allows users to enter and submit a redemption code. It features a loading state for asynchronous validation and uses framer-motion for a subtle entry animation on the visual card element.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/redeem// demo.tsx
"use client";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { RedeemDialog } from "@/components/ui/redeem";
export default function RedeemDialogDemo() {
const [isDialogOpen, setIsDialogOpen] = React.useState(false);
// A sample image URL for the card background
const imageUrl = "https://images.unsplash.com/photo-1511447333015-45b65e60f6d5?q=80&w=1920&auto=format&fit=crop";
// Mock function to simulate an API call for redeeming a code
const handleRedeem = (code: string): Promise<void> => {
console.log(`Verifying code: ${code}`);
return new Promise((resolve) => {
setTimeout(() => {
console.log("Code verified successfully!");
setIsDialogOpen(false);
resolve();
}, 2000);
});
};
return (
<div className="flex min-h-[350px] w-full items-center justify-center">
<Button onClick={() => setIsDialogOpen(true)}>
Redeem Code
</Button>
{/* The RedeemDialog component with the new background image prop */}
<RedeemDialog
open={isDialogOpen}
onOpenChange={setIsDialogOpen}
onRedeem={handleRedeem}
cardBackgroundImage={imageUrl}
/>
</div>
);
}