From f803e98a8bf93cf8cea7b8302c75c2548d681ce7 Mon Sep 17 00:00:00 2001 From: soufiane Date: Mon, 1 Dec 2025 17:07:40 +0100 Subject: [PATCH] refactor: extract PrizeCard component to reduce duplication MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create reusable PrizeCard component for prize display cards - Refactor lots page to use PrizeCard with data-driven approach - Reduces code duplication in prize card rendering 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/lots/page.tsx | 146 ++++-------------------------------- components/ui/PrizeCard.tsx | 68 +++++++++++++++++ components/ui/index.ts | 1 + 3 files changed, 82 insertions(+), 133 deletions(-) create mode 100644 components/ui/PrizeCard.tsx diff --git a/app/lots/page.tsx b/app/lots/page.tsx index 2427190..b6a201d 100644 --- a/app/lots/page.tsx +++ b/app/lots/page.tsx @@ -1,12 +1,22 @@ import type { Metadata } from "next"; import Link from "next/link"; import Image from "next/image"; +import { PrizeCard } from "@/components/ui"; export const metadata: Metadata = { title: "Lots à gagner - Thé Tip Top", description: "Découvrez tous les magnifiques prix de notre jeu-concours. Avec 100% de gagnants garantis, chaque participant repart avec un lot !", }; +const PRIZES = [ + { imageSrc: "/images/lots/infuseur.png", imageAlt: "Infuseur à thé premium", badge: "60% des lots", title: "Infuseur à thé premium", description: "Un infuseur en acier inoxydable de haute qualité pour ressortir les arômes de vos thés en vrac" }, + { imageSrc: "/images/lots/the-detox.png", imageAlt: "Boîte 100g thé détox", badge: "20% des lots", title: "Boîte 100g thé détox", description: "Mélange détox aux plantes bio : menthe, citronnelle, fenouil et gingembre" }, + { imageSrc: "/images/lots/the-signature.png", imageAlt: "Boîte 100g thé signature", badge: "10% des lots", title: "Boîte 100g thé signature", description: "Notre mélange signature exclusif : Earl Grey aux agrumes et pétales de fleurs" }, + { imageSrc: "/images/lots/coffret-39.png", imageAlt: "Coffret découverte 39€", badge: "6% des lots", title: "Coffret découverte 39€", description: "Sélection de nos 3 thés premium dans un élégant coffret cadeau" }, + { imageSrc: "/images/lots/coffret-69.jpg", imageAlt: "Coffret prestige 69€", badge: "4% des lots", title: "Coffret prestige 69€", description: "Collection premium : 5 thés d'exception avec accessoires dans un coffret luxe" }, + { imageSrc: "/images/lots/grand-prix.png", imageAlt: "Grand prix - 1 an de thé", badge: "1 an de THÉ", title: "Tirage Final", description: "Livraison mensuelle pendant 12 mois", isGrandPrix: true }, +]; + export default function LotsPage() { return (
@@ -67,139 +77,9 @@ export default function LotsPage() {
- - {/* Prize 1 - Infuseur */} -
-
- Infuseur à thé premium -
-
-
- 60% des lots -
-

Infuseur à thé premium

-

- Un infuseur en acier inoxydable de haute qualité pour ressortir les arômes de vos thés en vrac -

-
-
- - {/* Prize 2 - Thé détox */} -
-
- Boîte 100g thé détox -
-
-
- 20% des lots -
-

Boîte 100g thé détox

-

- Mélange détox aux plantes bio : menthe, citronnelle, fenouil et gingembre -

-
-
- - {/* Prize 3 - Thé signature */} -
-
- Boîte 100g thé signature -
-
-
- 10% des lots -
-

Boîte 100g thé signature

-

- Notre mélange signature exclusif : Earl Grey aux agrumes et pétales de fleurs -

-
-
- - {/* Prize 4 - Coffret 39€ */} -
-
- Coffret découverte 39€ -
-
-
- 6% des lots -
-

Coffret découverte 39€

-

- Sélection de nos 3 thés premium dans un élégant coffret cadeau -

-
-
- - {/* Prize 5 - Coffret 69€ */} -
-
- Coffret prestige 69€ -
-
-
- 4% des lots -
-

Coffret prestige 69€

-

- Collection premium : 5 thés d'exception avec accessoires dans un coffret luxe -

-
-
- - {/* Prize 6 - Tirage Final */} -
-
- Grand prix - 1 an de thé -
-
-
- 1 an de THÉ -
-

Tirage Final

-

- Livraison mensuelle pendant 12 mois -

-
-
- + {PRIZES.map((prize, index) => ( + + ))}
diff --git a/components/ui/PrizeCard.tsx b/components/ui/PrizeCard.tsx new file mode 100644 index 0000000..471f16a --- /dev/null +++ b/components/ui/PrizeCard.tsx @@ -0,0 +1,68 @@ +'use client'; + +import React from 'react'; +import Image from 'next/image'; +import { cn } from '@/utils/helpers'; + +interface PrizeCardProps { + imageSrc: string; + imageAlt: string; + badge: string; + title: string; + description: string; + isGrandPrix?: boolean; + className?: string; +} + +export const PrizeCard: React.FC = ({ + imageSrc, + imageAlt, + badge, + title, + description, + isGrandPrix = false, + className, +}) => { + return ( +
+
+ {imageAlt} +
+
+
+ {badge} +
+

{title}

+

{description}

+
+
+ ); +}; + +export default PrizeCard; diff --git a/components/ui/index.ts b/components/ui/index.ts index e1ed9d8..cb334db 100644 --- a/components/ui/index.ts +++ b/components/ui/index.ts @@ -8,5 +8,6 @@ export { LoadingState } from './LoadingState'; export { ErrorState } from './ErrorState'; export { StatusBadge, getRoleBadgeColor, getTicketStatusColor, getStatusColor } from './StatusBadge'; export { StatCard } from './StatCard'; +export { PrizeCard } from './PrizeCard'; export { EmptyState } from './EmptyState'; export { Pagination } from './Pagination';