feat: Add Empty Component

[wyMinLwin]

Empty Component

Added empty component for issue #418

Summary by CodeRabbit

• New Features

  • Adds an "8‑bit Empty" empty-state UI with header, media (icon/variant), title, description, content and action areas, plus retro font styling.

• Documentation

  • Adds a demo/docs page with OpenGraph metadata, installation commands, usage examples, code snippets, copy-command button, live preview and share actions.

• Chores

  • Adds a documentation navigation entry and exports a new metadata asset for the component.

[vercel]

@wyMinLwin is attempting to deploy a commit to the 8bitcn Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Adds a new 8‑bit Empty UI (presentational components), a docs/demo Next.js page with metadata and usage examples, a nav item for the component, and an exported image metadata constant.

Changes

Cohort / File(s)	Summary
Empty UI Component Module components/ui/8bit/empty.tsx	New presentational components: Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent. Uses CVA variants, cn for class composition, data-slot attributes, and conditional decorative overlays and font variants.
Empty Documentation Page app/docs/components/empty/page.tsx	New Next.js docs/demo page exporting metadata and default EmptyPage. Renders header, copy-command, installation commands, code snippets, OpenInV0Button, and a live preview card demonstrating the 8‑bit Empty components.
Navigation & Asset Metadata config/nav-items.ts lib/metadata.ts	Adds an "Empty" entry to navItems with new: true; exports emptyMetaData constant pointing to the empty-state asset image (/assets/8bitcn-empty-light.png).

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant Browser
  participant DocsPage as /app/docs/components/empty/page
  participant EmptyComp as components/ui/8bit/empty
  rect rgba(100,149,237,0.08)
    Browser->>DocsPage: GET /docs/components/empty
    DocsPage->>EmptyComp: import components + metadata
    DocsPage->>EmptyComp: render <Empty> with slots (Header, Media, Title, Description, Content)
    EmptyComp-->>DocsPage: composed preview DOM
  end
  rect rgba(34,139,34,0.06)
    DocsPage-->>Browser: deliver docs page with live preview, installation commands, and code snippets
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat(nav-items) add new tag to navigation menu #204 — also modifies config/nav-items.ts to add a new: true flag to a components nav entry.

Suggested reviewers

• TheOrcDev

Poem

🐇 I hopped in with pixels bright,
Blocks and bytes in retro light,
Headers, icons, buttons play,
Empty frames now sing and sway,
Tiny hops of code delight.

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 pull request title "feat: Add Empty Component" is directly aligned with the primary change in the changeset. The PR introduces a new Empty component implementation across multiple files, including the component itself at components/ui/8bit/empty.tsx, its documentation page, navigation configuration, and metadata entries. The title is concise, specific, and follows conventional commit message formatting, making it clear to reviewers and maintainers scanning the history that this PR adds a new UI component to the library.

✨ 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: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 237646c and 10e08eb.

📒 Files selected for processing (1)

• components/ui/8bit/empty.tsx (1 hunks)

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

• components/ui/8bit/empty.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: 6

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dd32523 and 95d8bac.

⛔ Files ignored due to path filters (2)

• public/assets/8bitcn-empty-dark.png is excluded by !**/*.png
• public/assets/8bitcn-empty-light.png is excluded by !**/*.png

📒 Files selected for processing (4)

• app/docs/components/empty/page.tsx (1 hunks)
• components/ui/8bit/empty.tsx (1 hunks)
• config/nav-items.ts (1 hunks)
• lib/metadata.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

app/docs/components/empty/page.tsx (5)

lib/metadata.ts (1)

• emptyMetaData (63-63)

app/docs/components/copy-command-button.tsx (1)

• CopyCommandButton (13-37)

app/docs/components/open-in-v0-button.tsx (1)

• OpenInV0Button (5-39)

app/docs/components/installation-commands.tsx (1)

• InstallationCommands (15-124)

app/docs/components/code-snippet.tsx (1)

• CodeSnippet (94-142)

components/ui/8bit/empty.tsx (1)

lib/utils.ts (1)

• cn (4-6)

🔇 Additional comments (5)

lib/metadata.ts (1)

63-63: LGTM!

The metadata export follows the established pattern and naming convention used by all other component metadata in this file.

app/docs/components/empty/page.tsx (2)

1-29: LGTM!

The imports and metadata configuration are properly structured and follow the established pattern for component documentation pages.

---

31-119: Well-structured documentation page.

The page component follows the established documentation pattern with a clear preview section, installation commands, and usage examples.

components/ui/8bit/empty.tsx (1)

119-126: LGTM!

All components are properly exported and the export order is logical.

config/nav-items.ts (1)

82-86: LGTM!

The navigation item addition follows the established pattern and is correctly configured with the new: true flag to highlight this as a new component. The placement in the array doesn't affect the final order since the components are sorted alphabetically on line 252.

[TheOrcDev]

Hey there! Thanks for this contribution! Sorry I don't know how I missed it.

Please run pnpm registry:build and push the build for the registry so I can test it out properly.

Thank you!