31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
"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>
|
|
)
|
|
}
|