Skip to content

Commit 1caf8c8

Browse files
petekppetekp
committed
docs(gallery): reduce card chrome and simplify preview nesting
1 parent 3e4b8d9 commit 1caf8c8

File tree

2 files changed

+67
-92
lines changed

2 files changed

+67
-92
lines changed

‎app/docs/_components/gallery-card-header.tsx‎

Lines changed: 64 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import type { MouseEventHandler, SVGProps } from "react";
3+
import type { MouseEventHandler } from "react";
44
import Link from "next/link";
55
import { Check, Copy as CopyIcon } from "lucide-react";
66
import { useCopyButton } from "fumadocs-ui/utils/use-copy-button";
@@ -20,28 +20,6 @@ import { analytics } from "@/lib/analytics";
2020
import { cn } from "@/lib/ui/cn";
2121
import { TrackedDynamicCodeBlock } from "./tracked-dynamic-codeblock";
2222

23-
function InfoIconWithoutCircle({
24-
className,
25-
...props
26-
}: SVGProps<SVGSVGElement>) {
27-
return (
28-
<svg
29-
xmlns="http://www.w3.org/2000/svg"
30-
viewBox="0 0 24 24"
31-
fill="none"
32-
stroke="currentColor"
33-
strokeWidth="2"
34-
strokeLinecap="round"
35-
strokeLinejoin="round"
36-
className={cn(className)}
37-
{...props}
38-
>
39-
<circle cx="12" cy="5" r="1.5" fill="currentColor" stroke="none" />
40-
<path d="M12 9v10" />
41-
</svg>
42-
);
43-
}
44-
4523
const registryById = new Map(componentsRegistry.map((c) => [c.id, c]));
4624

4725
interface GalleryCardHeaderProps {
@@ -74,85 +52,84 @@ export function GalleryCardHeader({
7452

7553
return (
7654
<header
77-
className={cn(
78-
"flex flex-col gap-2 rounded-lg border border-border/50 bg-muted/30 px-3 py-2",
79-
className,
80-
)}
55+
className={cn("flex w-full min-w-0 flex-col gap-1.5 px-1", className)}
8156
>
82-
{/* Title + npx shadcn add button (opens sheet) */}
8357
<div className="flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-2">
8458
<Link
8559
href={docsHref}
86-
className="text-foreground hover:text-foreground/80 shrink-0 rounded-md px-1.5 py-0.5 font-semibold tracking-tight underline-offset-4 hover:bg-muted/50 hover:underline"
60+
className="text-muted-foreground shrink-0 rounded-md px-0.5 text-xs font-mono tracking-wide underline-offset-4 hover:text-foreground hover:underline"
8761
onClick={() => {
8862
analytics.gallery.componentClicked(componentId);
8963
analytics.docs.navigationClicked(name, docsHref);
9064
}}
9165
>
92-
<h2 className="text-sm">{name}</h2>
66+
<h2>{name}</h2>
9367
</Link>
94-
<Sheet>
95-
<SheetTrigger asChild>
96-
<Button
97-
type="button"
98-
variant="outline"
99-
size="sm"
100-
className="h-7 shrink-0 gap-1.5 font-mono text-xs"
68+
<div className="pointer-events-none translate-y-0.5 opacity-0 transition-all duration-200 focus-within:pointer-events-auto focus-within:translate-y-0 focus-within:opacity-100 group-focus-within/gallery-card:pointer-events-auto group-focus-within/gallery-card:translate-y-0 group-focus-within/gallery-card:opacity-100 group-hover/gallery-card:pointer-events-auto group-hover/gallery-card:translate-y-0 group-hover/gallery-card:opacity-100">
69+
<Sheet>
70+
<SheetTrigger asChild>
71+
<Button
72+
type="button"
73+
variant="outline"
74+
size="sm"
75+
className="h-7 shrink-0 gap-1.5 border border-transparent px-2 font-mono text-[11px] text-muted-foreground hover:border-border/60 hover:text-foreground"
76+
>
77+
Install & use
78+
</Button>
79+
</SheetTrigger>
80+
<SheetContent
81+
side="right"
82+
className="flex w-full flex-col gap-0 sm:max-w-2xl"
10183
>
102-
<InfoIconWithoutCircle className="size-3.5 shrink-0" />
103-
npx shadcn add
104-
</Button>
105-
</SheetTrigger>
106-
<SheetContent
107-
side="right"
108-
className="flex w-full flex-col gap-0 sm:max-w-2xl"
109-
>
110-
<SheetHeader className="shrink-0 border-b border-border/50 pb-4 pr-10">
111-
<SheetTitle className="text-lg">Code</SheetTitle>
112-
<SheetDescription className="text-sm">
113-
Copy the command to install, then use the example in your app.
114-
</SheetDescription>
115-
</SheetHeader>
116-
<div className="scrollbar-subtle flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-4">
117-
<section className="space-y-2">
118-
<h3 className="text-foreground text-sm font-medium">Install</h3>
119-
<div className="flex items-center gap-2 rounded-lg border border-border/60 bg-muted/40 px-3 py-2.5">
120-
<code className="text-foreground/95 min-w-0 flex-1 break-all font-mono text-sm leading-relaxed">
121-
{installCommand}
122-
</code>
123-
<Button
124-
type="button"
125-
variant="ghost"
126-
size="sm"
127-
className="h-8 shrink-0 px-2.5"
128-
onClick={onCopy}
129-
aria-label={checked ? "Copied" : "Copy command"}
130-
>
131-
{checked ? (
132-
<Check className="size-4 text-green-600" />
133-
) : (
134-
<CopyIcon className="size-4" />
135-
)}
136-
</Button>
137-
</div>
138-
</section>
139-
{usageCode && (
140-
<section className="flex min-h-0 flex-1 flex-col space-y-2">
84+
<SheetHeader className="shrink-0 border-b border-border/50 pb-4 pr-10">
85+
<SheetTitle className="text-lg">Code</SheetTitle>
86+
<SheetDescription className="text-sm">
87+
Copy the command to install, then use the example in your app.
88+
</SheetDescription>
89+
</SheetHeader>
90+
<div className="scrollbar-subtle flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-4">
91+
<section className="space-y-2">
14192
<h3 className="text-foreground text-sm font-medium">
142-
Example
93+
Install
14394
</h3>
144-
<div className="scrollbar-subtle min-h-[200px] flex-1 overflow-auto rounded-lg border border-border/60 bg-muted/50 [&_pre]:!rounded-lg [&_pre]:!border-0 [&_pre]:!bg-transparent [&_pre]:!p-4 [&_pre]:!text-sm [&_pre]:!leading-relaxed">
145-
<TrackedDynamicCodeBlock
146-
lang="tsx"
147-
code={usageCode}
148-
copyButtonLabel="gallery usage example"
149-
/>
95+
<div className="flex items-center gap-2 rounded-lg border border-border/60 bg-muted/40 px-3 py-2.5">
96+
<code className="text-foreground/95 min-w-0 flex-1 break-all font-mono text-sm leading-relaxed">
97+
{installCommand}
98+
</code>
99+
<Button
100+
type="button"
101+
variant="ghost"
102+
size="sm"
103+
className="h-8 shrink-0 px-2.5"
104+
onClick={onCopy}
105+
aria-label={checked ? "Copied" : "Copy command"}
106+
>
107+
{checked ? (
108+
<Check className="size-4 text-green-600" />
109+
) : (
110+
<CopyIcon className="size-4" />
111+
)}
112+
</Button>
150113
</div>
151114
</section>
152-
)}
153-
</div>
154-
</SheetContent>
155-
</Sheet>
115+
{usageCode && (
116+
<section className="flex min-h-0 flex-1 flex-col space-y-2">
117+
<h3 className="text-foreground text-sm font-medium">
118+
Example
119+
</h3>
120+
<div className="scrollbar-subtle min-h-[200px] flex-1 overflow-auto rounded-lg border border-border/60 bg-muted/50 [&_pre]:!rounded-lg [&_pre]:!border-0 [&_pre]:!bg-transparent [&_pre]:!p-4 [&_pre]:!text-sm [&_pre]:!leading-relaxed">
121+
<TrackedDynamicCodeBlock
122+
lang="tsx"
123+
code={usageCode}
124+
copyButtonLabel="gallery usage example"
125+
/>
126+
</div>
127+
</section>
128+
)}
129+
</div>
130+
</SheetContent>
131+
</Sheet>
132+
</div>
156133
</div>
157134

158135
{!hideDescription && description && (

‎app/docs/gallery/page.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,15 +146,13 @@ function GalleryPreviewCard({
146146
return (
147147
<article
148148
className={cn(
149-
"group/gallery-card relative flex min-w-0 max-w-full flex-col gap-2 overflow-hidden rounded-xl border border-border/60 bg-card p-3 shadow-sm",
149+
"group/gallery-card relative flex items-center justify-center w-full min-w-0 max-w-full flex-col gap-3 overflow-hidden rounded-xl bg-card/40 p-3 pb-5 shadow-sm transition-[background-color,box-shadow] duration-200 hover:bg-card/80 focus-within:bg-card/80",
150150
className,
151151
)}
152152
>
153-
<GalleryCardHeader componentId={componentId} hideDescription />
154153
<GalleryPreviewImpression componentId={componentId} />
155-
<div className="scrollbar-subtle flex w-full min-w-0 max-w-full justify-center overflow-x-auto rounded-lg border border-border/50 bg-muted/20 px-4 py-3">
156-
{children}
157-
</div>
154+
<GalleryCardHeader componentId={componentId} hideDescription />
155+
{children}
158156
</article>
159157
);
160158
}

0 commit comments

Comments
 (0)