Skip to content

Commit 000071c

Browse files
prc5prc5
committed
docs(stories): retheme product card example as döner kebab
Replace the canvas jacket e-commerce card with a food delivery kebab card — sauce/portion selectors, updated pricing, delivery info, and matching copy. Made-with: Cursor
1 parent ee0bd3c commit 000071c

1 file changed

Lines changed: 46 additions & 47 deletions

File tree

‎src/stories/examples/product-card/example.tsx‎

Lines changed: 46 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,20 @@ import React, { useState } from "react";
33
import { TransformWrapper, TransformComponent } from "../../../components";
44
import { normalizeArgs } from "../../utils";
55

6-
const productImg =
7-
"https://images.pexels.com/photos/29306504/pexels-photo-29306504.jpeg";
6+
const productImg = "https://images.pexels.com/photos/29306504/pexels-photo-29306504.jpeg";
87

98
const font = 'Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
109

1110
/* ── Data ──────────────────────────────────────────────────── */
1211

13-
const COLORS = [
14-
{ name: "Midnight", value: "#1e293b" },
15-
{ name: "Stone", value: "#78716c" },
16-
{ name: "Ivory", value: "#fefce8" },
17-
{ name: "Ocean", value: "#0284c7" },
12+
const SAUCES = [
13+
{ name: "Garlic", value: "#fefce8" },
14+
{ name: "Spicy", value: "#dc2626" },
15+
{ name: "Yogurt", value: "#e2e8f0" },
16+
{ name: "BBQ", value: "#78350f" },
1817
];
1918

20-
const SIZES = ["XS", "S", "M", "L", "XL"] as const;
19+
const PORTIONS = ["S", "M", "L", "XL"] as const;
2120

2221
/* ── Icons ─────────────────────────────────────────────────── */
2322

@@ -152,7 +151,7 @@ function ImageViewer({ args }: { args: Record<string, unknown> }) {
152151
>
153152
<img
154153
src={productImg}
155-
alt="Product"
154+
alt="Döner Kebab"
156155
draggable={false}
157156
style={{
158157
width: "100%",
@@ -316,7 +315,7 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
316315
marginBottom: 12,
317316
}}
318317
>
319-
New arrival
318+
Best Seller
320319
</span>
321320

322321
{/* Title */}
@@ -330,7 +329,7 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
330329
lineHeight: 1.2,
331330
}}
332331
>
333-
Premium Canvas Jacket
332+
Signature Döner Kebab
334333
</h2>
335334

336335
{/* Rating */}
@@ -344,7 +343,7 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
344343
>
345344
<div style={{ display: "flex", gap: 2 }}>
346345
{[1, 2, 3, 4, 5].map((n) => (
347-
<StarIcon key={n} full={n <= 4} />
346+
<StarIcon key={n} full={n <= 5} />
348347
))}
349348
</div>
350349
<span
@@ -354,7 +353,7 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
354353
fontWeight: 500,
355354
}}
356355
>
357-
4.0 · 128 reviews
356+
4.8 · 342 reviews
358357
</span>
359358
</div>
360359

@@ -375,7 +374,7 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
375374
letterSpacing: "-0.02em",
376375
}}
377376
>
378-
$189
377+
$12.99
379378
</span>
380379
<span
381380
style={{
@@ -385,7 +384,7 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
385384
fontWeight: 500,
386385
}}
387386
>
388-
$249
387+
$15.99
389388
</span>
390389
<span
391390
style={{
@@ -397,7 +396,7 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
397396
color: "rgba(248, 113, 113, 0.9)",
398397
}}
399398
>
400-
-24%
399+
-19%
401400
</span>
402401
</div>
403402

@@ -410,13 +409,13 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
410409
color: "rgba(255,255,255,0.45)",
411410
}}
412411
>
413-
Crafted from premium organic cotton canvas with a water-resistant
414-
finish. Features a relaxed fit, hidden snap closures, and interior
415-
pockets. Zoom into the image to inspect fabric texture and stitching
416-
detail.
412+
Tender slices of seasoned lamb and chicken, slow-roasted on a
413+
vertical spit, wrapped in warm handmade flatbread with crisp
414+
lettuce, tomatoes, onions, and your choice of sauce. Zoom into
415+
the image to see every juicy detail up close.
417416
</p>
418417

419-
{/* Color selector */}
418+
{/* Sauce selector */}
420419
<div style={{ marginBottom: 18 }}>
421420
<div
422421
style={{
@@ -426,32 +425,32 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
426425
marginBottom: 8,
427426
}}
428427
>
429-
Color ·{" "}
428+
Sauce ·{" "}
430429
<span style={{ color: "rgba(255,255,255,0.8)" }}>
431-
{COLORS[selectedColor].name}
430+
{SAUCES[selectedSauce].name}
432431
</span>
433432
</div>
434433
<div style={{ display: "flex", gap: 8 }}>
435-
{COLORS.map((c, i) => (
434+
{SAUCES.map((s, i) => (
436435
<button
437-
key={c.name}
436+
key={s.name}
438437
type="button"
439-
onClick={() => setSelectedColor(i)}
440-
title={c.name}
441-
aria-label={`Select color ${c.name}`}
438+
onClick={() => setSelectedSauce(i)}
439+
title={s.name}
440+
aria-label={`Select sauce ${s.name}`}
442441
style={{
443442
width: 32,
444443
height: 32,
445444
borderRadius: "50%",
446445
border:
447-
selectedColor === i
446+
selectedSauce === i
448447
? "2px solid rgba(255,255,255,0.7)"
449448
: "2px solid rgba(255,255,255,0.1)",
450-
background: c.value,
449+
background: s.value,
451450
cursor: "pointer",
452451
padding: 0,
453452
boxShadow:
454-
selectedColor === i
453+
selectedSauce === i
455454
? "0 0 0 3px rgba(99, 102, 241, 0.35)"
456455
: "none",
457456
transition: "border-color 0.15s, box-shadow 0.15s",
@@ -461,7 +460,7 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
461460
</div>
462461
</div>
463462

464-
{/* Size selector */}
463+
{/* Portion selector */}
465464
<div style={{ marginBottom: 24 }}>
466465
<div
467466
style={{
@@ -471,31 +470,31 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
471470
marginBottom: 8,
472471
}}
473472
>
474-
Size ·{" "}
473+
Portion ·{" "}
475474
<span style={{ color: "rgba(255,255,255,0.8)" }}>
476-
{SIZES[selectedSize]}
475+
{PORTIONS[selectedPortion]}
477476
</span>
478477
</div>
479478
<div style={{ display: "flex", gap: 6 }}>
480-
{SIZES.map((s, i) => (
479+
{PORTIONS.map((p, i) => (
481480
<button
482-
key={s}
481+
key={p}
483482
type="button"
484-
onClick={() => setSelectedSize(i)}
483+
onClick={() => setSelectedPortion(i)}
485484
style={{
486485
width: 42,
487486
height: 42,
488487
borderRadius: 10,
489488
border:
490-
selectedSize === i
489+
selectedPortion === i
491490
? "1.5px solid rgba(99, 102, 241, 0.6)"
492491
: "1.5px solid rgba(255,255,255,0.08)",
493492
background:
494-
selectedSize === i
493+
selectedPortion === i
495494
? "rgba(99, 102, 241, 0.15)"
496495
: "rgba(255,255,255,0.03)",
497496
color:
498-
selectedSize === i
497+
selectedPortion === i
499498
? "rgba(165, 180, 252, 0.95)"
500499
: "rgba(255,255,255,0.5)",
501500
fontSize: 13,
@@ -507,7 +506,7 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
507506
"border-color 0.15s, background 0.15s, color 0.15s",
508507
}}
509508
>
510-
{s}
509+
{p}
511510
</button>
512511
))}
513512
</div>
@@ -533,13 +532,13 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
533532
letterSpacing: "-0.01em",
534533
}}
535534
>
536-
Add to Cart
535+
Add to Order
537536
</button>
538537
<button
539538
type="button"
540539
onClick={() => setWishlisted(!wishlisted)}
541540
aria-label={
542-
wishlisted ? "Remove from wishlist" : "Add to wishlist"
541+
wishlisted ? "Remove from favorites" : "Add to favorites"
543542
}
544543
style={{
545544
width: 48,
@@ -568,7 +567,7 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
568567
</button>
569568
</div>
570569

571-
{/* Shipping info */}
570+
{/* Delivery info */}
572571
<div
573572
style={{
574573
marginTop: 18,
@@ -583,9 +582,9 @@ export const Example: React.FC<Record<string, unknown>> = (args) => {
583582
fontWeight: 500,
584583
}}
585584
>
586-
<span>✈ Free shipping</span>
587-
<span>↻ 30-day returns</span>
588-
<span>✓ In stock</span>
585+
<span>🕐 25-35 min delivery</span>
586+
<span>🔥 Made fresh to order</span>
587+
<span>✓ Available now</span>
589588
</div>
590589
</div>
591590
</div>

0 commit comments

Comments
 (0)