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..38193cd --- /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 */} + + {/* thumbnail 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 + + +