snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/app/(app)/(styles)/sera/media-library/index.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+
+import { Separator } from "@/styles/base-sera/ui/separator"
+
+import { AssetDetails } from "./components/asset-details"
+import { AssetGrid } from "./components/asset-grid"
+import { PreviewHeader } from "./components/preview-header"
+import { ASSETS } from "./data"
+
+export function MediaLibrary() {
+  const [selectedId, setSelectedId] = React.useState<string>(ASSETS[0].id)
+
+  const selectedAsset = React.useMemo(
+    () => ASSETS.find((asset) => asset.id === selectedId) ?? ASSETS[0],
+    [selectedId]
+  )
+
+  return (
+    <div className="preview theme-taupe @container/preview w-full flex-1 bg-muted pt-4 font-sans ring-1 ring-foreground/5 [--gap:--spacing(4)] sm:pt-0 md:[--gap:--spacing(6)] xl:[--gap:--spacing(8)] 2xl:py-8 **:[.container]:px-(--gap)">
+      <PreviewHeader />
+      <Separator className="hidden sm:block" />
+      <div className="container grid grid-cols-1 items-start gap-(--gap) py-(--gap) xl:grid-cols-[minmax(0,1fr)_320px]">
+        <AssetGrid selectedId={selectedId} onSelect={setSelectedId} />
+        <AssetDetails asset={selectedAsset} />
+      </div>
+    </div>
+  )
+}