multica/apps/web/components/example.tsx
Naiyuan Qing 5c240ab363 refactor(web): update imports to use @multica/ui package
Replace local UI component and utility imports with @multica/ui
subpath imports. Remove old components/ui/ directory, lib/utils.ts,
and globals.css. Configure postcss, next.config, and tsconfig for
monorepo UI package consumption.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 11:34:05 +08:00

56 lines
1.3 KiB
TypeScript

import { cn } from "@multica/ui/lib/utils"
function ExampleWrapper({ className, ...props }: React.ComponentProps<"div">) {
return (
<div className="bg-background w-full">
<div
data-slot="example-wrapper"
className={cn(
"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl",
className
)}
{...props}
/>
</div>
)
}
function Example({
title,
children,
className,
containerClassName,
...props
}: React.ComponentProps<"div"> & {
title?: string
containerClassName?: string
}) {
return (
<div
data-slot="example"
className={cn(
"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none",
containerClassName
)}
{...props}
>
{title && (
<div className="text-muted-foreground px-1.5 py-2 text-xs font-medium">
{title}
</div>
)}
<div
data-slot="example-content"
className={cn(
"bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full",
className
)}
>
{children}
</div>
</div>
)
}
export { ExampleWrapper, Example }