Find your product’s frame.

"use client";
import { AppearanceScope } from "@/components/appearance-provider";
import type { AppearanceConfig } from "@/lib/appearance";


import { Providers } from "@/components/providers";
import { DashboardShell } from "@/components/blocks/dashboard-shell";
import { MetricCard } from "@/components/blocks/metric-card";
import { PageHeading } from "@/components/blocks/page-heading";

function WorkspaceExample() {
  return (
    <Providers locale="en">
      <DashboardShell path="dashboard" layout="sidebar">
        <section className="grid gap-7">
          <PageHeading title="Workspace overview" description="A local example of the selected layout." />
          <div className="grid gap-4 sm:grid-cols-2">
            <MetricCard label="Monthly revenue" value="$48,295" change="+12.8%" series={[12, 18, 15, 24, 22, 32]} />
            <MetricCard label="Active customers" value="2,420" change="+8.2%" />
          </div>
        </section>
      </DashboardShell>
    </Providers>
  );
}

const appearance: AppearanceConfig = {
  "version": 1,
  "theme": "dark",
  "palette": "aurora",
  "colors": {
    "primary": "#8B5CF6",
    "secondary": "#22D3EE",
    "tertiary": "#34D399"
  },
  "material": "elevated",
  "radius": 16,
  "density": "comfortable",
  "typography": "modern",
  "motion": "expressive",
  "hover": "glow",
  "shadow": 0.65,
  "border": 0.55,
  "gradient": {
    "kind": "mesh",
    "angle": 125,
    "intensity": 0.65,
    "stops": [
      {
        "color": "#8B5CF6",
        "position": 0
      },
      {
        "color": "#22D3EE",
        "position": 0.5
      },
      {
        "color": "#34D399",
        "position": 1
      }
    ]
  },
  "shader": {
    "kind": "aurora",
    "speed": 0.2,
    "scale": 1,
    "intensity": 0.55,
    "paused": false
  }
};

export default function ConfiguredWorkspaceExample() {
  return (
    <AppearanceScope appearance={appearance}>
      <WorkspaceExample />
    </AppearanceScope>
  );
}