feat(card): added a new example for card component called Retro player card

[ehmasuk]

What I Did
I added a new example to the Card component called "Retro Player Card". This is a styled variant that shows how the Card can be used for player profiles or gaming dashboards.

Why It's Useful
This example highlights the bold and unique beauty of the NeoBrutalism style in RetroUI. Users can easily copy the code, paste it into their projects, and customize it to fit their needs.

Special Change
Added a new SVG image (for the player avatar) in the public/images/ directory.

Preview
Here is a screenshot of the new Retro Player Card example:

Summary by CodeRabbit

• New Features

  • Added a new retro-player component: retro-themed audio player UI with playback controls (repeat, skip, play/pause, shuffle), draggable progress timeline, time display, and decorative visuals.
  • Component supports responsive layouts and dark mode.
  • Added the component to the examples gallery with a lazy-loaded interactive preview.

• Documentation

  • Added a "Retro player card" showcase to the Card component docs.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@ehmasuk is attempting to deploy a commit to the Retro UI Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Adds a new retro-themed audio player preview: a React component (preview/components/retro-player.tsx), a config entry registering it as an example (config/components.ts), and a documentation section referencing it (content/docs/components/card.mdx).

Changes

Cohort / File(s)	Change Summary
Configuration Addition config/components.ts	Adds a new retro-player entry to componentConfig.examples with name, filePath, and a lazy-loaded preview import.
Component Implementation preview/components/retro-player.tsx	New default-exported React component RetroPlayerStyle implementing a retro-styled audio player UI (Card, Button, lucide-react icons, Sparkle elements, timeline/progress, playback controls, responsive and dark-mode styling).
Documentation Update content/docs/components/card.mdx	Inserts a "Retro player card" section and showcase block into the Card component documentation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Review UI structure, accessibility (keyboard focus, ARIA for controls), and responsive behavior in preview/components/retro-player.tsx.
• Verify lazy import path and example registration in config/components.ts.
• Ensure documentation markup in content/docs/components/card.mdx follows existing showcase conventions.

Poem

🐰
I hopped into code with a vinyl beat,
Buttons that click and a timeline so neat,
Sparkles that shimmer in dusk and in glow,
A retro-player sings soft and slow,
Hooray — the preview’s ready to show!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: adding a new 'Retro player card' example to the Card component, which aligns with all modifications across the three files.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b915ed3 and e85a407.

📒 Files selected for processing (1)

• preview/components/retro-player.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• preview/components/retro-player.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 25b2c25 and b915ed3.

⛔ Files ignored due to path filters (1)

• public/images/punk.svg is excluded by !**/*.svg

📒 Files selected for processing (3)

• config/components.ts
• content/docs/components/card.mdx
• preview/components/retro-player.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

preview/components/retro-player.tsx (1)

components/retroui/Button.tsx (1)

• Button (40-63)

🔇 Additional comments (9)

content/docs/components/card.mdx (1)

46-51: LGTM!

The documentation structure is consistent with existing examples and properly references the new retro-player showcase component.

config/components.ts (1)

681-685: LGTM!

The configuration entry is well-structured and follows the established pattern for example components.

preview/components/retro-player.tsx (7)

1-12: LGTM!

All imports are properly used throughout the component.

---

15-17: LGTM!

Component structure and Card wrapper are properly configured.

---

19-27: LGTM!

Header layout with navigation and action buttons is well-structured.

---

52-70: LGTM!

The custom progress bar implementation with visual draggable knob and time indicators is well-styled and appropriate for a showcase component.

---

72-92: LGTM!

Playback controls are well-organized with appropriate responsive sizing and visual hierarchy.

---

94-104: LGTM!

Decorative sparkle elements are appropriately positioned and responsively hidden on mobile devices.

---

32-36: Image file exists at the correct path.

The /images/punk.svg file is present in public/images/punk.svg. No action required.