---
import Dashboard from '../components/astro/Dashboard.astro';
import Card from '../components/astro/Card.astro';
---

<Dashboard sidebarLabel="Dashboard navigation">
  <nav slot="sidebar" class="dashboard__nav">
    <a href="/dashboard" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
    <a href="#" class="dashboard__nav-link">Items</a>
  </nav>
  <div class="dashboard-page">
    <header class="dashboard-page__header">
      <h1 class="dashboard-page__title">Dashboard</h1>
    </header>
    <section class="dashboard-page__stats">
      <Card class="dashboard-page__stat"><div class="card__body"><span class="card__label">Total</span><span class="card__value">1,234</span></div></Card>
    </section>
  </div>
</Dashboard>

<!-- Same structure as Astro live example: sidebar (nav) + main. -->
<div class="dashboard">
  <aside class="dashboard__sidebar" aria-label="Dashboard navigation">
    <nav class="dashboard__nav">
      <a href="/dashboard" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
      <a href="/items" class="dashboard__nav-link">Items</a>
      <a href="/settings" class="dashboard__nav-link">Settings</a>
    </nav>
  </aside>
  <main id="main-content" class="dashboard__main">
    <h3 style="margin: 0 0 var(--spacing-2);">Main content</h3>
    <p style="margin: 0;">Put your page content here. Combine with Card, Table, and other Rizzo components.</p>
  </main>
</div>

<script>
  import { Dashboard, Card } from '$lib/rizzo';
</script>

<Dashboard sidebarLabel="Dashboard navigation">
  <nav slot="sidebar" class="dashboard__nav">
    <a href="/dashboard" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
    <a href="#" class="dashboard__nav-link">Items</a>
  </nav>
  <div class="dashboard-page">
    <header class="dashboard-page__header">
      <h1 class="dashboard-page__title">Dashboard</h1>
    </header>
    <section class="dashboard-page__stats">
      <Card class="dashboard-page__stat"><div class="card__body"><span class="card__label">Total</span><span class="card__value">1,234</span></div></Card>
    </section>
  </div>
</Dashboard>

<script setup>
import Dashboard from '@/components/rizzo/Dashboard.vue';
</script>

<template>
  <Dashboard>
    <template #default>
      <aside class="dashboard__sidebar" aria-label="Dashboard navigation">
        <nav class="dashboard__nav">
          <a href="/dashboard" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
          <a href="/items" class="dashboard__nav-link">Items</a>
          <a href="/settings" class="dashboard__nav-link">Settings</a>
        </nav>
      </aside>
      <main class="dashboard__main">
        <h3>Main content</h3>
        <p>Put your page content here. Combine with Card, Table, and other Rizzo components.</p>
      </main>
    </template>
  </Dashboard>
</template>

import { Dashboard } from './components/react';

<Dashboard
  sidebarLabel="Dashboard navigation"
  sidebar={
    <nav className="dashboard__nav">
      <a href="/dashboard" className="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
      <a href="/items" className="dashboard__nav-link">Items</a>
      <a href="/settings" className="dashboard__nav-link">Settings</a>
    </nav>
  }
>
  <div>
    <h3>Main content</h3>
    <p>Put your page content here. Combine with Card, Table, and other Rizzo components.</p>
  </div>
</Dashboard>