/** * Playground boilerplate templates * Each template provides a starting point for experimentation */ export const playgroundTemplates = [ { name: "Card Component", code: `

Card Title

A simple card component with an image placeholder and text content.

` }, { name: "Navigation Bar", code: ` ` }, { name: "Profile Card", code: `

Jane Doe

UI Designer

142
Posts
8.5k
Followers
284
Following
` }, { name: "Button Styles", code: ` ` }, { name: "Pricing Table", code: `
Basic
€9
per month
Team
€99
per month
` }, { name: "Form Layout", code: `

Sign In

` }, { name: "Feature Grid", code: `

Fast

Lightning quick performance.

Secure

Enterprise-grade security.

Simple

Intuitive interface.

` }, { name: "Badge Collection", code: ` New Active Urgent Pending Beta Default Online Offline` }, { name: "CSS Animation", code: `
` }, { name: "Flexbox Layout", code: `

Main Content

Flexible width

Card 1

Equal

Card 2

Equal

Card 3

Equal

` }, { name: "Social Post", code: `
creative_studio
💬
2,847 likes

creative_studio Living my best life ✨🌟

` }, { name: "Story Highlights", code: `
You
anna
mike
lisa
alex
` }, { name: "Like Button", code: `
1,234 likes
` }, { name: "Comment Section", code: `
sarah_designs This is amazing! 🔥
2h · Reply · ♡ 12
mike_photo Love the colors! What filter did you use?
1h · Reply · ♡ 5
` }, { name: "Notification Badge", code: ` ` }, { name: "Emoji Reactions", code: `
👍 ❤️ 😂 😮 😢 😠
Check out this cool CSS trick!
👍 12 ❤️ 5
` }, { name: "Bio Section", code: `
142
posts
8.5K
followers
284
following
Creative Studio ✨
Digital creator | Design tips
📍 New York
✉️ hello@studio.com
linktr.ee/creativestudio
` }, { name: "Status Update", code: `
What's on your mind?
🎥 Live
🖼️ Photo
😊 Feeling
` }, { name: "Chat Bubble", code: `
Hey! How are you? 👋
I'm good! Just learned some CSS 🎨
Check out this cool effect!
Wow that's awesome! 😍
Can you teach me?
` }, { name: "Accordion FAQ", code: `

Frequently Asked Questions

How do I get started?
Simply create an account and follow our step-by-step guide. It takes less than 5 minutes!
Is there a free trial?
Yes! We offer a 14-day free trial with full access to all features.
Can I cancel anytime?
Absolutely. No contracts, no commitments. Cancel with one click.
` }, { name: "Form Validation", code: `

Create Account

Must be at least 8 characters

` }, { name: "Toggle Switch", code: `

Dark Mode

Use dark theme

Notifications

Get push alerts

Auto-save

Save automatically

` }, { name: "CSS Tabs", code: `

Welcome! 👋

This is a CSS-only tab component using radio buttons.

Features ✨

No JavaScript needed! Pure CSS magic with :checked selector.

Pricing 💰

It's free! Open source and ready to use.

` }, { name: "Modal Dialog", code: ` ` }, { name: "Tooltip", code: `
Tooltip on top!
Tooltip on bottom!
` }, { name: "Progress Steps", code: `
Cart
Shipping
3
Payment
4
Done
` }, { name: "Dropdown Menu", code: ` ` }, { name: "Star Rating", code: `

Click to rate:

★★★★☆ 4.2 (128 reviews)
` }, { name: "Search Box", code: `
🕐 Recent search
🔥 Trending topic
📁 In your files
` } ]; /** * Get a random template * @returns {object} Random template with name and code */ export function getRandomTemplate() { const index = Math.floor(Math.random() * playgroundTemplates.length); return playgroundTemplates[index]; } /** * Get all template names * @returns {string[]} Array of template names */ export function getTemplateNames() { return playgroundTemplates.map((t) => t.name); }