refactor(ui): reorganize components into ui/ subdirectory and share layout
- Move shadcn components from src/components/ to src/components/ui/ - Move component-example and example from apps/web to packages/ui - Update package.json exports with separate components/* and components/ui/* paths - Update components.json ui alias in both packages/ui and apps/web - Add missing @import "shadcn/tailwind.css" to globals.css - Add new UI components: sheet, sidebar, skeleton, switch - Update apps/web and apps/desktop to use shared ComponentExample Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
141af9e9f1
commit
eb5c388a80
26 changed files with 926 additions and 39 deletions
56
packages/ui/src/components/example.tsx
Normal file
56
packages/ui/src/components/example.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
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 }
|
||||
Loading…
Add table
Add a link
Reference in a new issue