mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-07 22:18:39 +00:00
47c47eaed2
* feat: add base and radix docs * feat: transform code for display * fix * fix * fix * fix * fix * chore: remove claude files * fix * fix * fix * chore: run format:write * fix * feat: add more examples * fix * feat: add aspect-ratio * feat: add avatar * feat: add badge * feat: add breadcrumb * fix * feat: add button * fix * fix * fix * feat: add calendar and card * feat: add carousel * fix: chart * feat: add checkbox * feat: add collapsible * feat: add combobox * feat: add command * feat: add context menu * feat: add data-table dialog and drawer * feat: dropdown-menu * feat: add date-picker * feat: add empty * feat: add field and hover-card * fix: input * feat: add input * feat: add input-group * feat: add input-otp * feat: add item * feat: add kbd and label * feat: add menubar * feat: add native-select * feat: add more components * feat: more components * feat: more components * feat: add skeleton, slider and sonner * feat: add spinner and switch * feat: add more components * fix: tabs * fix: tabs * feat: add docs for sidebar * fix * fix * fi * docs: update * fix: create page * fix * fix * chore: add changelog * fix
81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { Button } from "@/registry/new-york-v4/ui/button"
|
|
|
|
export function ComponentPreviewTabs({
|
|
className,
|
|
previewClassName,
|
|
align = "center",
|
|
hideCode = false,
|
|
chromeLessOnMobile = false,
|
|
component,
|
|
source,
|
|
...props
|
|
}: React.ComponentProps<"div"> & {
|
|
previewClassName?: string
|
|
align?: "center" | "start" | "end"
|
|
hideCode?: boolean
|
|
chromeLessOnMobile?: boolean
|
|
component: React.ReactNode
|
|
source: React.ReactNode
|
|
}) {
|
|
const [isMobileCodeVisible, setIsMobileCodeVisible] = React.useState(false)
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"group relative mt-4 mb-12 flex flex-col gap-2 overflow-hidden rounded-xl border",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<div data-slot="preview">
|
|
<div
|
|
data-align={align}
|
|
data-chromeless={chromeLessOnMobile}
|
|
className={cn(
|
|
"preview flex h-72 w-full justify-center p-10 data-[align=center]:items-center data-[align=end]:items-end data-[align=start]:items-start data-[chromeless=true]:h-auto data-[chromeless=true]:p-0",
|
|
previewClassName
|
|
)}
|
|
>
|
|
{component}
|
|
</div>
|
|
{!hideCode && (
|
|
<div
|
|
data-slot="code"
|
|
data-mobile-code-visible={isMobileCodeVisible}
|
|
className="relative overflow-hidden data-[mobile-code-visible=false]:max-h-24 md:max-h-none data-[mobile-code-visible=false]:md:max-h-none [&_[data-rehype-pretty-code-figure]]:!m-0 [&_[data-rehype-pretty-code-figure]]:rounded-t-none [&_[data-rehype-pretty-code-figure]]:border-t [&_pre]:max-h-72"
|
|
>
|
|
{source}
|
|
{!isMobileCodeVisible && (
|
|
<div className="absolute inset-0 flex items-center justify-center md:hidden">
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
background:
|
|
"linear-gradient(to top, var(--color-code), color-mix(in oklab, var(--color-code) 60%, transparent), transparent)",
|
|
}}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="outline"
|
|
className="bg-background text-foreground dark:bg-background dark:text-foreground relative z-10"
|
|
onClick={() => {
|
|
setIsMobileCodeVisible(true)
|
|
}}
|
|
>
|
|
View Code
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|