dees-catalog/ts_web/elements/00group-media/dees-tile-note/demo.ts

import { html } from '@design.estate/dees-element';

export const demo = () => {
  const sampleCode = `import { html } from 'lit';

export class MyComponent {
  private items: string[] = [];

  render() {
    return html\`
      <div class="container">
        \${this.items.map(item => html\`
          <span>\${item}</span>
        \`)}
      </div>
    \`;
  }
}`;

  const sampleText = `Meeting Notes - Q4 Planning
Date: January 15, 2026
Attendees: Alice, Bob, Charlie

Key Decisions:
1. Launch new feature by March
2. Hire 2 more engineers
3. Migrate to new CI/CD pipeline
4. Update design system to v3

Action Items:
- Alice: Draft PRD by next week
- Bob: Set up interview pipeline
- Charlie: Evaluate Jenkins vs GitHub Actions`;

  const sampleJson = `{
  "name": "@design.estate/dees-catalog",
  "version": "3.38.0",
  "description": "Design component catalog",
  "dependencies": {
    "@design.estate/dees-element": "^2.0.0",
    "lit": "^3.1.0"
  },
  "scripts": {
    "build": "tsbuild",
    "test": "tstest"
  }
}`;

  return html`
    <style>
      .demo-container {
        padding: 40px;
        background: #f5f5f5;
      }
      .demo-section {
        margin-bottom: 60px;
      }
      h3 {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 600;
      }
      .tile-row {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        align-items: flex-start;
      }
    </style>

    <div class="demo-container">
      <div class="demo-section">
        <h3>Note Tiles</h3>
        <div class="tile-row">
          <dees-tile-note
            title="component.ts"
            .content=${sampleCode}
            language="typescript"
            label="component.ts"
            @tile-click=${(e: CustomEvent) => console.log('Note clicked:', e.detail)}
          ></dees-tile-note>

          <dees-tile-note
            title="Meeting Notes"
            .content=${sampleText}
            label="meeting-notes.txt"
          ></dees-tile-note>

          <dees-tile-note
            title="package.json"
            .content=${sampleJson}
            language="json"
            label="package.json"
          ></dees-tile-note>
        </div>
      </div>

      <div class="demo-section">
        <h3>Size Variants</h3>
        <div class="tile-row">
          <dees-tile-note
            size="small"
            title="small.ts"
            .content=${sampleCode}
            language="ts"
            label="small.ts"
          ></dees-tile-note>

          <dees-tile-note
            title="default.ts"
            .content=${sampleCode}
            language="ts"
            label="default.ts"
          ></dees-tile-note>

          <dees-tile-note
            size="large"
            title="large.ts"
            .content=${sampleCode}
            language="ts"
            label="large.ts"
          ></dees-tile-note>
        </div>
      </div>

      <div class="demo-section">
        <h3>Without Title</h3>
        <dees-tile-note
          .content=${sampleText}
          label="untitled.txt"
        ></dees-tile-note>
      </div>
    </div>
  `;
};