From b915ed3550abf7e35b45866cbc2f01c1ea9e0191 Mon Sep 17 00:00:00 2001 From: ehmasuk Date: Mon, 22 Dec 2025 16:48:42 +0600 Subject: [PATCH 1/2] feat(card): added a new example for card component called Retro player card --- config/components.ts | 5 + content/docs/components/card.mdx | 6 + preview/components/retro-player.tsx | 107 ++ public/images/punk.svg | 2320 +++++++++++++++++++++++++++ 4 files changed, 2438 insertions(+) create mode 100644 preview/components/retro-player.tsx create mode 100644 public/images/punk.svg diff --git a/config/components.ts b/config/components.ts index 0128975..7de5f3d 100644 --- a/config/components.ts +++ b/config/components.ts @@ -678,5 +678,10 @@ export const componentConfig: { filePath: "preview/components/loader-style-custom.tsx", preview: lazy(() => import("@/preview/components/loader-style-custom")) }, + "retro-player": { + name: "retro-player", + filePath: "preview/components/retro-player.tsx", + preview: lazy(() => import("@/preview/components/retro-player")) + }, }, }; diff --git a/content/docs/components/card.mdx b/content/docs/components/card.mdx index 17925c1..fc61b4b 100644 --- a/content/docs/components/card.mdx +++ b/content/docs/components/card.mdx @@ -43,3 +43,9 @@ links: ### Testimonial card +
+
+ +### Retro player card + + \ No newline at end of file diff --git a/preview/components/retro-player.tsx b/preview/components/retro-player.tsx new file mode 100644 index 0000000..355b142 --- /dev/null +++ b/preview/components/retro-player.tsx @@ -0,0 +1,107 @@ +import { Button, Card } from "@/components/retroui"; +import { + ArrowLeftSquare, + Clock, + Heart, + Pause, + Repeat, + Shuffle, + Sparkle, + StepBack, + StepForward, +} from "lucide-react"; + + +export default function RetroPlayerStyle() { + return ( + + {/* header */} + + +

Now playing

+ + + {/* card content */} + + {/* thimbnail box */} +
+ retro player album +
+

Punk Anthem Music

+
+

by Punk

+

+ {" "} + 02:15 +

+
+
+
+ +
+ {/* timeline box */} +
+
+
+
+
+
+
+
+
+

+ 01:10 +

+

+ 02:15 +

+
+
+ {/* controls */} +
+ + + + + +
+
+ + + + + + ); +} diff --git a/public/images/punk.svg b/public/images/punk.svg new file mode 100644 index 0000000..ace24d4 --- /dev/null +++ b/public/images/punk.svg @@ -0,0 +1,2320 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut + RED RECORD © 2023 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + PUNK + + ANTHEM + + + From e85a40798f17a56f279d2ecbc7fb0a3f399fb8c2 Mon Sep 17 00:00:00 2001 From: ehmasuk Date: Mon, 22 Dec 2025 17:12:47 +0600 Subject: [PATCH 2/2] fix(card): resolve review comments and typo --- preview/components/retro-player.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/preview/components/retro-player.tsx b/preview/components/retro-player.tsx index 355b142..38193cd 100644 --- a/preview/components/retro-player.tsx +++ b/preview/components/retro-player.tsx @@ -27,7 +27,7 @@ export default function RetroPlayerStyle() { {/* card content */} - {/* thimbnail box */} + {/* thumbnail box */}
{" "} 02:15