App shell

import type { CSSProperties } from "react";
import { Button } from "@/components/equip/button";
import { Grid, GridItem } from "@/components/equip/grid";
import { PageHeader } from "@/components/equip/page-header";
import { Sidebar, SidebarItem, SidebarSection } from "@/components/equip/sidebar";
import { AppShell } from "@/components/equip/app-shell";

function Icon({ d }: { d: string }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={d} />
    </svg>
  );
}

const nav = (
  <Sidebar label="Main" style={{ "--eq-sidebar-width": "180px" } as CSSProperties}>
    <SidebarSection>
      <SidebarItem href="#overview" current icon={<Icon d="M2.5 2.5h4.5v6h-4.5Z M9 2.5h4.5v3.5H9Z M9 8h4.5v5.5H9Z M2.5 10.5h4.5v3H2.5Z" />}>
        Overview
      </SidebarItem>
      <SidebarItem href="#customers" icon={<Icon d="M8 7.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z M3 13.5c.5-2.5 2.5-4 5-4s4.5 1.5 5 4" />}>
        Customers
      </SidebarItem>
      <SidebarItem href="#invoices" badge={3} icon={<Icon d="M4 1.5h8v13l-2-1.5-2 1.5-2-1.5-2 1.5Z M6 5h4 M6 8h4" />}>
        Invoices
      </SidebarItem>
      <SidebarItem href="#reports" icon={<Icon d="M3 13V8.5 M6.5 13V3.5 M10 13V6.5 M13.5 13v-3" />}>
        Reports
      </SidebarItem>
    </SidebarSection>
  </Sidebar>
);

const stats = [
  ["Revenue", "€48,210"],
  ["New customers", "126"],
  ["Open invoices", "18"],
];

export default function Example() {
  return (
    <AppShell
      mainAs="div"
      collapseBelow="s"
      header={
        <>
          <strong>Larder</strong>
          <span style={{ marginInlineStart: "auto", fontSize: "var(--eq-text-s)", color: "var(--eq-ink-2)" }}>Mira Holt</span>
        </>
      }
      nav={nav}
      aside={
        <div style={{ padding: 16, fontSize: "var(--eq-text-s)" }}>
          <strong>Activity</strong>
          <ul style={{ margin: "8px 0 0", padding: 0, listStyle: "none", display: "grid", gap: 8, color: "var(--eq-ink-2)" }}>
            <li>Invoice 2041 paid by Fabrikam</li>
            <li>Kofi added a customer</li>
            <li>Q3 report exported</li>
          </ul>
        </div>
      }
      asideLabel="Activity"
      footer="All systems normal"
      style={
        {
          "--eq-app-shell-height": "460px",
          "--eq-app-shell-aside-width": "12rem",
          width: "100%",
          border: "1px solid var(--eq-line)",
          borderRadius: "var(--eq-radius-l)",
        } as CSSProperties
      }
    >
      <div style={{ display: "grid", gap: 20, padding: 20 }}>
        <PageHeader
          level={2}
          title="Overview"
          description="This month across all workspaces."
          primaryAction={
            <Button size="s" variant="accent">
              New invoice
            </Button>
          }
        />
        <Grid min="9rem" gap={3}>
          {stats.map(([label, value]) => (
            <GridItem key={label} style={{ padding: 12, border: "1px solid var(--eq-line)", borderRadius: "var(--eq-radius-m)", background: "var(--eq-surface)" }}>
              <div style={{ fontSize: "var(--eq-text-xs)", color: "var(--eq-ink-2)" }}>{label}</div>
              <div style={{ fontSize: "var(--eq-text-l)", fontWeight: "var(--eq-weight-strong)" }}>{value}</div>
            </GridItem>
          ))}
          <GridItem span="full" style={{ height: 140, borderRadius: "var(--eq-radius-m)", background: "var(--eq-tint)" }} />
        </Grid>
      </div>
    </AppShell>
  );
}

"use client";

import type { CSSProperties } from "react";
import { Button } from "@/components/equip/button";
import { Section } from "@/components/equip/section";
import { Sidebar, SidebarItem, SidebarSection, SidebarToggle } from "@/components/equip/sidebar";
import { AppShell } from "@/components/equip/app-shell";

function Icon({ d }: { d: string }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={d} />
    </svg>
  );
}

const label = { display: "grid", gap: 4, fontSize: "var(--eq-text-s)", fontWeight: "var(--eq-weight-strong)" } as const;
const input = {
  height: 34,
  padding: "0 12px",
  border: "1px solid var(--eq-line-strong)",
  borderRadius: "var(--eq-radius-m)",
  background: "var(--eq-raised)",
  color: "var(--eq-ink)",
  font: "inherit",
  fontWeight: "var(--eq-weight)",
} as const;

export default function Example() {
  return (
    <AppShell
      mainAs="div"
      collapseBelow="s"
      navLabel="Settings"
      header={<strong>Settings</strong>}
      nav={(placement) => (
        <Sidebar label="Settings" style={{ "--eq-sidebar-width": "190px" } as CSSProperties}>
          {placement === "inline" && <SidebarToggle />}
          <SidebarSection label="Account">
            <SidebarItem href="#profile" current icon={<Icon d="M8 7.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z M3 13.5c.5-2.5 2.5-4 5-4s4.5 1.5 5 4" />}>
              Profile
            </SidebarItem>
            <SidebarItem href="#security" icon={<Icon d="M8 1.5 13 3.5v4c0 3-2 5.5-5 7-3-1.5-5-4-5-7v-4Z" />}>Security</SidebarItem>
            <SidebarItem href="#billing" icon={<Icon d="M2 4.5h12v7H2Z M2 7h12" />}>Billing</SidebarItem>
          </SidebarSection>
        </Sidebar>
      )}
      style={
        {
          "--eq-app-shell-height": "380px",
          width: "100%",
          border: "1px solid var(--eq-line)",
          borderRadius: "var(--eq-radius-l)",
        } as CSSProperties
      }
    >
      <div style={{ display: "grid", gap: 24, padding: 20 }}>
        <Section id="shell-profile" layout="split" title="Profile" description="Shown to people in your workspace.">
          <div style={{ display: "grid", gap: 12, maxWidth: 320 }}>
            <label style={label}>
              Display name
              <input style={input} defaultValue="Mira Holt" />
            </label>
            <label style={label}>
              Email
              <input style={input} type="email" defaultValue="mira@larder.example" />
            </label>
          </div>
        </Section>
        <Section id="shell-sessions" layout="split" divider title="Sessions" description="Signed in on 3 devices.">
          <Button variant="outline">Sign out everywhere</Button>
        </Section>
      </div>
    </AppShell>
  );
}

import type { CSSProperties } from "react";
import { Sidebar, SidebarItem, SidebarSection } from "@/components/equip/sidebar";
import { AppShell } from "@/components/equip/app-shell";

function Icon({ d }: { d: string }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={d} />
    </svg>
  );
}

const orders = ["#3021 Linen overshirt", "#3020 Canvas tote", "#3019 Rain shell", "#3018 Merino crew", "#3017 Wool beanie"];

export default function Example() {
  return (
    <AppShell
      mainAs="div"
      header={<strong>Orders</strong>}
      nav={
        <Sidebar label="Main">
          <SidebarSection>
            <SidebarItem href="#orders" current badge={5} icon={<Icon d="M2.5 4.5h11l-1 9h-9Z M5.5 4.5a2.5 2.5 0 0 1 5 0" />}>
              Orders
            </SidebarItem>
            <SidebarItem href="#products" icon={<Icon d="M2.5 5 8 2.5 13.5 5v6L8 13.5 2.5 11Z M2.5 5 8 7.5 13.5 5 M8 7.5v6" />}>Products</SidebarItem>
            <SidebarItem href="#customers" icon={<Icon d="M8 7.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z M3 13.5c.5-2.5 2.5-4 5-4s4.5 1.5 5 4" />}>Customers</SidebarItem>
          </SidebarSection>
        </Sidebar>
      }
      style={
        {
          "--eq-app-shell-height": "320px",
          width: "100%",
          maxWidth: 340,
          border: "1px solid var(--eq-line)",
          borderRadius: "var(--eq-radius-l)",
        } as CSSProperties
      }
    >
      <ul style={{ margin: 0, padding: "8px 16px", listStyle: "none" }}>
        {orders.map((order) => (
          <li key={order} style={{ padding: "10px 0", borderBottom: "1px solid var(--eq-line)", fontSize: "var(--eq-text-s)" }}>
            {order}
          </li>
        ))}
      </ul>
    </AppShell>
  );
}