Create documentation that emphasizes the gaming and retro aspects of 8-bit components.
Gaming Terminology
Use gaming-specific language in descriptions and examples:
```mdx
---
title: Quest Log
description: Displays an 8-bit mission and task tracking system.
---
```
Realistic Game Data
Use meaningful, game-related data in examples:
```tsx
quests={[
{
id: "quest-1",
title: "Defeat the Goblin King",
description: "The Goblin King has been terrorizing the village for weeks.",
status: "active",
shortDescription: "Defeat the Goblin King in the Dark Forest.",
},
{
id: "quest-2",
title: "Collect Dragon Scales",
description: "The local blacksmith needs dragon scales to forge armor.",
status: "completed",
shortDescription: "Collect 10 dragon scales.",
},
]}
/>
```
Health Bar Examples
Use realistic health values and context:
```mdx
Default health bar
Critical health (25%)
```
Pixel Font Usage
Apply .retro class for pixel font styling:
```tsx
```
Wrapper Pattern in Examples
Remember 8-bit components wrap shadcn/ui:
```tsx
// Import the 8-bit component
import { Button } from "@/components/ui/8bit/button";
// Not the base shadcn component
import { Button } from "@/components/ui/button"; // Wrong!
```
retro.css Awareness
All 8-bit components require retro.css:
```tsx
// This import is required in the component source
import "@/components/ui/8bit/styles/retro.css";
// Documentation shows usage with 8-bit components
```
Multiple Variants
Show default vs retro variants:
```mdx
```
Gaming Block Documentation
For blocks (multiple components):
```mdx
---
title: Quest Log
description: Displays an 8-bit mission and task tracking system.
---
quests={[
{
id: "quest-1",
title: "Defeat the Goblin King",
status: "active",
},
]}
/>
```
Key Principles
- Gaming context - Use game-related terminology
- Realistic data - Show actual game scenarios
- Retro styling - Use
.retro class for pixel fonts - Wrapper awareness - Import from
@/components/ui/8bit/ - Variant showcase - Demonstrate multiple variants
- Block complexity - Handle multi-component documentation
- 8-bit specific - Emphasize unique 8-bit features
Reference Examples
content/docs/blocks/gaming/quest-log.mdx - Quest tracking patterncontent/docs/components/health-bar.mdx - Health bar variantscontent/docs/blocks/gaming/leaderboard.mdx - Gaming list pattern
|