mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-25 21:56:08 +00:00
Open in v0 (#4613)
* feat: edit in v0 * feat: update edit sources * fix: edit button * feat: rename to open in v0
This commit is contained in:
@@ -1,34 +1,59 @@
|
||||
"use server"
|
||||
|
||||
import { track } from "@vercel/analytics/server"
|
||||
|
||||
const EDIT_IN_V0_SOURCE = "ui.shadcn.com"
|
||||
import { capitalCase } from "change-case"
|
||||
|
||||
export async function editInV0({
|
||||
name,
|
||||
title,
|
||||
description,
|
||||
style,
|
||||
code,
|
||||
url,
|
||||
}: {
|
||||
name: string
|
||||
title?: string
|
||||
description: string
|
||||
style: string
|
||||
code: string
|
||||
url: string
|
||||
}) {
|
||||
try {
|
||||
title =
|
||||
title ??
|
||||
capitalCase(
|
||||
name.replace(/\d+/g, "").replace("-demo", "").replace("-", " ")
|
||||
)
|
||||
|
||||
await track("edit_in_v0", {
|
||||
name,
|
||||
title,
|
||||
description,
|
||||
style,
|
||||
url,
|
||||
})
|
||||
|
||||
// Replace "use client" in the code.
|
||||
// v0 will handle this for us.
|
||||
code = code.replace(`"use client"`, "")
|
||||
// code = code.replace(`"use client"`, "")
|
||||
|
||||
const response = await fetch(`${process.env.V0_URL}/api/edit`, {
|
||||
const payload = {
|
||||
title,
|
||||
description,
|
||||
code,
|
||||
source: {
|
||||
title: "shadcn/ui",
|
||||
url,
|
||||
},
|
||||
meta: {
|
||||
project: capitalCase(name.replace(/\d+/g, "")),
|
||||
file: `${name}.tsx`,
|
||||
},
|
||||
}
|
||||
|
||||
const response = await fetch(`${process.env.V0_URL}/chat/api/open-in-v0`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ description, code, source: EDIT_IN_V0_SOURCE }),
|
||||
body: JSON.stringify(payload),
|
||||
headers: {
|
||||
"x-v0-edit-secret": process.env.V0_EDIT_SECRET!,
|
||||
"x-vercel-protection-bypass":
|
||||
@@ -42,6 +67,8 @@ export async function editInV0({
|
||||
throw new Error("Unauthorized")
|
||||
}
|
||||
|
||||
console.error(response.statusText)
|
||||
|
||||
throw new Error("Something went wrong. Please try again later.")
|
||||
}
|
||||
|
||||
@@ -49,9 +76,10 @@ export async function editInV0({
|
||||
|
||||
return {
|
||||
...result,
|
||||
url: `${process.env.V0_URL}/edit/${result.id}`,
|
||||
url: `${process.env.V0_URL}/chat/api/open-in-v0/${result.id}`,
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
if (error instanceof Error) {
|
||||
return { error: error.message }
|
||||
}
|
||||
|
||||
@@ -141,11 +141,10 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
|
||||
mutation.attributeName === "aria-selected" &&
|
||||
ref.current?.getAttribute("aria-selected") === "true"
|
||||
) {
|
||||
onPeek(model);
|
||||
onPeek(model)
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
return (
|
||||
<CommandItem
|
||||
|
||||
@@ -40,7 +40,7 @@ function V0Tooltip({
|
||||
{style === "new-york" ? (
|
||||
<>Not available in New York</>
|
||||
) : (
|
||||
<>Edit in v0</>
|
||||
<>Open in v0</>
|
||||
)}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
@@ -57,11 +57,17 @@ export function V0Button({
|
||||
block: Pick<Block, "name" | "description" | "code" | "style">
|
||||
size?: Size
|
||||
} & ButtonProps) {
|
||||
const [url, setUrl] = React.useState("https://ui.shadcn.com")
|
||||
|
||||
React.useEffect(() => {
|
||||
setUrl(window.location.href)
|
||||
}, [])
|
||||
|
||||
if (block.style === "new-york") {
|
||||
return (
|
||||
<V0Tooltip size={size} style={block.style}>
|
||||
<Button
|
||||
aria-label="Edit in v0"
|
||||
aria-label="Open in v0"
|
||||
className={cn(
|
||||
"z-50 h-[calc(theme(spacing.7)_-_1px)] gap-1 rounded-[6px] bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black",
|
||||
size === "icon" && "h-7 w-7 p-0",
|
||||
@@ -86,7 +92,7 @@ export function V0Button({
|
||||
<V0Logo className="h-4 w-4" />
|
||||
) : (
|
||||
<>
|
||||
Edit in <V0Logo />
|
||||
Open in <V0Logo />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
@@ -102,6 +108,7 @@ export function V0Button({
|
||||
description: block.description || "",
|
||||
code: block.code,
|
||||
style: block.style,
|
||||
url,
|
||||
})
|
||||
|
||||
if (result?.error) {
|
||||
@@ -141,7 +148,7 @@ function Form({
|
||||
return (
|
||||
<V0Tooltip size={size}>
|
||||
<Button
|
||||
aria-label="Edit in v0"
|
||||
aria-label="Open in v0"
|
||||
className={cn(
|
||||
"z-50 h-[calc(theme(spacing.7)_-_1px)] gap-1 rounded-[6px] bg-black px-3 text-xs text-white hover:bg-black hover:text-white dark:bg-white dark:text-black",
|
||||
size === "icon" && "h-7 w-7 p-0",
|
||||
@@ -161,7 +168,7 @@ function Form({
|
||||
) : (
|
||||
<>
|
||||
{pending && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
|
||||
Edit in <V0Logo />
|
||||
Open in <V0Logo />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
@@ -10,7 +10,7 @@ links:
|
||||
<ComponentPreview
|
||||
name="accordion-demo"
|
||||
className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
|
||||
description="An accordion with items"
|
||||
description="An accordion with three items"
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -10,6 +10,7 @@ links:
|
||||
|
||||
<ComponentPreview
|
||||
name="alert-dialog-demo"
|
||||
title="An alert dialog with cancel and continue buttons."
|
||||
description="An alert dialog with cancel and continue buttons."
|
||||
/>
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@ component: true
|
||||
|
||||
<ComponentPreview
|
||||
name="alert-demo"
|
||||
title="An alert with an icon, title and description."
|
||||
description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
|
||||
/>
|
||||
|
||||
@@ -63,6 +64,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||||
|
||||
<ComponentPreview
|
||||
name="alert-demo"
|
||||
title="An alert with an icon, title and description."
|
||||
description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
|
||||
/>
|
||||
|
||||
@@ -70,5 +72,6 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||||
|
||||
<ComponentPreview
|
||||
name="alert-destructive"
|
||||
title="An alert with a destructive variant."
|
||||
description="An alert with a destructive variant. The title says 'Delete this item?' and the description is 'This action cannot be undone.'."
|
||||
/>
|
||||
|
||||
@@ -7,7 +7,11 @@ links:
|
||||
api: https://www.radix-ui.com/docs/primitives/components/aspect-ratio#api-reference
|
||||
---
|
||||
|
||||
<ComponentPreview name="aspect-ratio-demo" />
|
||||
<ComponentPreview
|
||||
name="aspect-ratio-demo"
|
||||
title="Aspect Ratio"
|
||||
description="A component that displays an image with a 16:9 aspect ratio."
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -7,7 +7,11 @@ links:
|
||||
api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference
|
||||
---
|
||||
|
||||
<ComponentPreview name="avatar-demo" description="An avatar with a fallback." />
|
||||
<ComponentPreview
|
||||
name="avatar-demo"
|
||||
title="Avatar"
|
||||
description="An avatar with a fallback."
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -4,7 +4,11 @@ description: Displays a badge or a component that looks like a badge.
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentPreview name="badge-demo" description="A badge" />
|
||||
<ComponentPreview
|
||||
name="badge-demo"
|
||||
title="Badge"
|
||||
description="A default badge"
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -64,7 +68,11 @@ import { badgeVariants } from "@/components/ui/badge"
|
||||
|
||||
### Default
|
||||
|
||||
<ComponentPreview name="badge-demo" description="A badge" />
|
||||
<ComponentPreview
|
||||
name="badge-demo"
|
||||
title="Badge"
|
||||
description="A default badge"
|
||||
/>
|
||||
|
||||
---
|
||||
|
||||
@@ -72,6 +80,7 @@ import { badgeVariants } from "@/components/ui/badge"
|
||||
|
||||
<ComponentPreview
|
||||
name="badge-secondary"
|
||||
title="Badge"
|
||||
description="A badge using secondary as variant."
|
||||
/>
|
||||
|
||||
@@ -81,6 +90,7 @@ import { badgeVariants } from "@/components/ui/badge"
|
||||
|
||||
<ComponentPreview
|
||||
name="badge-outline"
|
||||
title="Badge"
|
||||
description="A badge using outline as variant."
|
||||
/>
|
||||
|
||||
|
||||
@@ -6,7 +6,11 @@ links:
|
||||
doc: https://react-day-picker.js.org
|
||||
---
|
||||
|
||||
<ComponentPreview name="calendar-demo" />
|
||||
<ComponentPreview
|
||||
name="calendar-demo"
|
||||
title="Calendar"
|
||||
description="A calendar showing the current date."
|
||||
/>
|
||||
|
||||
## About
|
||||
|
||||
|
||||
@@ -7,7 +7,11 @@ links:
|
||||
api: https://www.embla-carousel.com/api
|
||||
---
|
||||
|
||||
<ComponentPreview name="carousel-demo" />
|
||||
<ComponentPreview
|
||||
name="carousel-demo"
|
||||
title="Carousel"
|
||||
description="A carousel with 5 items and a previous and next button."
|
||||
/>
|
||||
|
||||
## About
|
||||
|
||||
@@ -82,7 +86,11 @@ import {
|
||||
|
||||
To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
|
||||
|
||||
<ComponentPreview name="carousel-size" />
|
||||
<ComponentPreview
|
||||
name="carousel-size"
|
||||
title="Carousel"
|
||||
description="A carousel with 3 active items of equal size."
|
||||
/>
|
||||
|
||||
```tsx title="Example" showLineNumbers {4-6}
|
||||
// 33% of the carousel width.
|
||||
@@ -120,7 +128,11 @@ You can always adjust this in your own project if you need to.
|
||||
|
||||
</Callout>
|
||||
|
||||
<ComponentPreview name="carousel-spacing" />
|
||||
<ComponentPreview
|
||||
name="carousel-spacing"
|
||||
title="Carousel"
|
||||
description="A carousel with 3 items with a spacing of 1rem."
|
||||
/>
|
||||
|
||||
```tsx title="Example" showLineNumbers /-ml-4/ /pl-4/
|
||||
<Carousel>
|
||||
@@ -146,7 +158,11 @@ You can always adjust this in your own project if you need to.
|
||||
|
||||
Use the `orientation` prop to set the orientation of the carousel.
|
||||
|
||||
<ComponentPreview name="carousel-orientation" />
|
||||
<ComponentPreview
|
||||
name="carousel-orientation"
|
||||
title="Carousel"
|
||||
description="A vertical carousel."
|
||||
/>
|
||||
|
||||
```tsx showLineNumbers /vertical | horizontal/
|
||||
<Carousel orientation="vertical | horizontal">
|
||||
@@ -181,7 +197,11 @@ You can pass options to the carousel using the `opts` prop. See the [Embla Carou
|
||||
|
||||
Use a state and the `setApi` props to get an instance of the carousel API.
|
||||
|
||||
<ComponentPreview name="carousel-api" />
|
||||
<ComponentPreview
|
||||
name="carousel-api"
|
||||
title="Carousel"
|
||||
description="A carousel with a slide counter."
|
||||
/>
|
||||
|
||||
```tsx showLineNumbers {1,4,22}
|
||||
import { type CarouselApi } from "@/components/ui/carousel"
|
||||
@@ -272,6 +292,10 @@ export function Example() {
|
||||
}
|
||||
```
|
||||
|
||||
<ComponentPreview name="carousel-plugin" />
|
||||
<ComponentPreview
|
||||
name="carousel-plugin"
|
||||
title="Carousel"
|
||||
description="A carousel with the autoplay plugin."
|
||||
/>
|
||||
|
||||
See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
|
||||
|
||||
@@ -4,7 +4,10 @@ description: Autocomplete input and command palette with a list of suggestions.
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentPreview name="combobox-demo" />
|
||||
<ComponentPreview
|
||||
name="combobox-demo"
|
||||
description="A combobox with a list of frameworks."
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -115,7 +118,10 @@ export function ComboboxDemo() {
|
||||
|
||||
### Combobox
|
||||
|
||||
<ComponentPreview name="combobox-demo" />
|
||||
<ComponentPreview
|
||||
name="combobox-demo"
|
||||
description="A combobox with a list of frameworks."
|
||||
/>
|
||||
|
||||
### Popover
|
||||
|
||||
@@ -123,7 +129,10 @@ export function ComboboxDemo() {
|
||||
|
||||
### Dropdown menu
|
||||
|
||||
<ComponentPreview name="combobox-dropdown-menu" />
|
||||
<ComponentPreview
|
||||
name="combobox-dropdown-menu"
|
||||
description="A combobox in a dropdown menu"
|
||||
/>
|
||||
|
||||
### Responsive
|
||||
|
||||
|
||||
@@ -95,7 +95,10 @@ import {
|
||||
|
||||
### Dialog
|
||||
|
||||
<ComponentPreview name="command-dialog" />
|
||||
<ComponentPreview
|
||||
name="command-dialog"
|
||||
description="A command menu in a dialog"
|
||||
/>
|
||||
|
||||
To show the command menu in a dialog, use the `<CommandDialog />` component.
|
||||
|
||||
|
||||
@@ -4,7 +4,10 @@ description: A date picker component with range and presets.
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentPreview name="date-picker-demo" />
|
||||
<ComponentPreview
|
||||
name="date-picker-demo"
|
||||
description="A date picker in a popover"
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -66,15 +69,24 @@ See the [React DayPicker](https://react-day-picker.js.org) documentation for mor
|
||||
|
||||
### Date Picker
|
||||
|
||||
<ComponentPreview name="date-picker-demo" />
|
||||
<ComponentPreview
|
||||
name="date-picker-demo"
|
||||
description="A date picker in a popover"
|
||||
/>
|
||||
|
||||
### Date Range Picker
|
||||
|
||||
<ComponentPreview name="date-picker-with-range" />
|
||||
<ComponentPreview
|
||||
name="date-picker-with-range"
|
||||
description="A date range picker"
|
||||
/>
|
||||
|
||||
### With Presets
|
||||
|
||||
<ComponentPreview name="date-picker-with-presets" />
|
||||
<ComponentPreview
|
||||
name="date-picker-with-presets"
|
||||
description="A date picker with presets"
|
||||
/>
|
||||
|
||||
### Form
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ links:
|
||||
doc: https://github.com/emilkowalski/vaul
|
||||
---
|
||||
|
||||
<ComponentPreview name="drawer-demo" />
|
||||
<ComponentPreview name="drawer-demo" description="A drawer component." />
|
||||
|
||||
## About
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ links:
|
||||
api: https://www.radix-ui.com/docs/primitives/components/menubar#api-reference
|
||||
---
|
||||
|
||||
<ComponentPreview name="menubar-demo" />
|
||||
<ComponentPreview name="menubar-demo" description="A menubar component." />
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -7,7 +7,10 @@ links:
|
||||
api: https://www.radix-ui.com/docs/primitives/components/progress#api-reference
|
||||
---
|
||||
|
||||
<ComponentPreview name="progress-demo" />
|
||||
<ComponentPreview
|
||||
name="progress-demo"
|
||||
description="A progress bar component."
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -7,7 +7,10 @@ links:
|
||||
api: https://www.radix-ui.com/docs/primitives/components/scroll-area#api-reference
|
||||
---
|
||||
|
||||
<ComponentPreview name="scroll-area-demo" />
|
||||
<ComponentPreview
|
||||
name="scroll-area-demo"
|
||||
description="A scroll area component."
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ description: A responsive table component.
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentPreview name="table-demo" />
|
||||
<ComponentPreview name="table-demo" description="A table component." />
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "next dev -p 3003",
|
||||
"dev": "next dev -p 3333",
|
||||
"build": "contentlayer2 build && pnpm build:registry && next build",
|
||||
"build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --loglevel silent --write \"registry/**/*.{ts,tsx,mdx}\" --cache",
|
||||
"build:docs": "contentlayer2 build",
|
||||
@@ -53,6 +53,7 @@
|
||||
"@tanstack/react-table": "^8.9.1",
|
||||
"@vercel/analytics": "^1.2.2",
|
||||
"@vercel/og": "^0.0.21",
|
||||
"change-case": "^5.4.4",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^1.2.1",
|
||||
"cmdk": "^1.0.0",
|
||||
|
||||
@@ -9,7 +9,7 @@ export default function AspectRatioDemo() {
|
||||
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
|
||||
alt="Photo by Drew Beamer"
|
||||
fill
|
||||
className="rounded-md object-cover"
|
||||
className="h-full w-full rounded-md object-cover"
|
||||
/>
|
||||
</AspectRatio>
|
||||
)
|
||||
|
||||
@@ -29,7 +29,7 @@ export default function CarouselDApiDemo() {
|
||||
}, [api])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mx-auto max-w-xs">
|
||||
<Carousel setApi={setApi} className="w-full max-w-xs">
|
||||
<CarouselContent>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
|
||||
@@ -20,7 +20,7 @@ import {
|
||||
|
||||
export default function CommandDemo() {
|
||||
return (
|
||||
<Command className="rounded-lg border shadow-md">
|
||||
<Command className="rounded-lg border shadow-md md:min-w-[450px]">
|
||||
<CommandInput placeholder="Type a command or search..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
|
||||
return (
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
className="max-w-md rounded-lg border"
|
||||
className="max-w-md rounded-lg border md:min-w-[450px]"
|
||||
>
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<div className="flex h-[200px] items-center justify-center p-6">
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
|
||||
return (
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
className="max-w-md rounded-lg border"
|
||||
className="max-w-md rounded-lg border md:min-w-[450px]"
|
||||
>
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<div className="flex h-[200px] items-center justify-center p-6">
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
|
||||
return (
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
className="min-h-[200px] max-w-md rounded-lg border"
|
||||
className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
|
||||
>
|
||||
<ResizablePanel defaultSize={25}>
|
||||
<div className="flex h-full items-center justify-center p-6">
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
|
||||
return (
|
||||
<ResizablePanelGroup
|
||||
direction="vertical"
|
||||
className="min-h-[200px] max-w-md rounded-lg border"
|
||||
className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
|
||||
>
|
||||
<ResizablePanel defaultSize={25}>
|
||||
<div className="flex h-full items-center justify-center p-6">
|
||||
|
||||
@@ -9,7 +9,7 @@ export default function AspectRatioDemo() {
|
||||
src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
|
||||
alt="Photo by Drew Beamer"
|
||||
fill
|
||||
className="rounded-md object-cover"
|
||||
className="h-full w-full rounded-md object-cover"
|
||||
/>
|
||||
</AspectRatio>
|
||||
)
|
||||
|
||||
@@ -29,7 +29,7 @@ export default function CarouselDApiDemo() {
|
||||
}, [api])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mx-auto max-w-xs">
|
||||
<Carousel setApi={setApi} className="w-full max-w-xs">
|
||||
<CarouselContent>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
|
||||
@@ -20,7 +20,7 @@ import {
|
||||
|
||||
export default function CommandDemo() {
|
||||
return (
|
||||
<Command className="rounded-lg border shadow-md">
|
||||
<Command className="rounded-lg border shadow-md md:min-w-[450px]">
|
||||
<CommandInput placeholder="Type a command or search..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
|
||||
return (
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
className="max-w-md rounded-lg border"
|
||||
className="max-w-md rounded-lg border md:min-w-[450px]"
|
||||
>
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<div className="flex h-[200px] items-center justify-center p-6">
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
|
||||
return (
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
className="max-w-md rounded-lg border"
|
||||
className="max-w-md rounded-lg border md:min-w-[450px]"
|
||||
>
|
||||
<ResizablePanel defaultSize={50}>
|
||||
<div className="flex h-[200px] items-center justify-center p-6">
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
|
||||
return (
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
className="min-h-[200px] max-w-md rounded-lg border"
|
||||
className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
|
||||
>
|
||||
<ResizablePanel defaultSize={25}>
|
||||
<div className="flex h-full items-center justify-center p-6">
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function ResizableDemo() {
|
||||
return (
|
||||
<ResizablePanelGroup
|
||||
direction="vertical"
|
||||
className="min-h-[200px] max-w-md rounded-lg border"
|
||||
className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
|
||||
>
|
||||
<ResizablePanel defaultSize={25}>
|
||||
<div className="flex h-full items-center justify-center p-6">
|
||||
|
||||
75
pnpm-lock.yaml
generated
75
pnpm-lock.yaml
generated
@@ -58,7 +58,7 @@ importers:
|
||||
version: 7.32.2(eslint@8.44.0)
|
||||
eslint-plugin-tailwindcss:
|
||||
specifier: 3.13.1
|
||||
version: 3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3)))
|
||||
version: 3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)))
|
||||
postcss:
|
||||
specifier: ^8.4.24
|
||||
version: 8.4.24
|
||||
@@ -70,10 +70,10 @@ importers:
|
||||
version: 3.1.3(prettier@2.8.8)
|
||||
tailwindcss:
|
||||
specifier: 3.3.7
|
||||
version: 3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))
|
||||
version: 3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
|
||||
tailwindcss-animate:
|
||||
specifier: ^1.0.5
|
||||
version: 1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3)))
|
||||
version: 1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)))
|
||||
tsx:
|
||||
specifier: ^4.1.4
|
||||
version: 4.1.4
|
||||
@@ -207,6 +207,9 @@ importers:
|
||||
'@vercel/og':
|
||||
specifier: ^0.0.21
|
||||
version: 0.0.21
|
||||
change-case:
|
||||
specifier: ^5.4.4
|
||||
version: 5.4.4
|
||||
class-variance-authority:
|
||||
specifier: ^0.7.0
|
||||
version: 0.7.0
|
||||
@@ -454,7 +457,7 @@ importers:
|
||||
version: 4.1.3
|
||||
tsup:
|
||||
specifier: ^6.6.3
|
||||
version: 6.6.3(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5))(typescript@4.9.5)
|
||||
version: 6.6.3(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))(typescript@4.9.5)
|
||||
type-fest:
|
||||
specifier: ^3.8.0
|
||||
version: 3.8.0
|
||||
@@ -478,10 +481,10 @@ importers:
|
||||
version: 0.288.0(react@18.2.0)
|
||||
next:
|
||||
specifier: 14.1.3
|
||||
version: 14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
|
||||
version: 14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
|
||||
next-themes:
|
||||
specifier: ^0.2.1
|
||||
version: 0.2.1(next@14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
|
||||
version: 0.2.1(next@14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
|
||||
react:
|
||||
specifier: ^18.2.0
|
||||
version: 18.2.0
|
||||
@@ -3130,6 +3133,9 @@ packages:
|
||||
resolution: {integrity: sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==}
|
||||
engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
|
||||
|
||||
change-case@5.4.4:
|
||||
resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
|
||||
|
||||
character-entities-html4@2.1.0:
|
||||
resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
|
||||
|
||||
@@ -7377,7 +7383,7 @@ snapshots:
|
||||
lodash.merge: 4.6.2
|
||||
lodash.uniq: 4.5.0
|
||||
resolve-from: 5.0.0
|
||||
ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.5.3)
|
||||
ts-node: 10.9.2(@types/node@20.11.27)(typescript@5.5.3)
|
||||
typescript: 5.5.3
|
||||
transitivePeerDependencies:
|
||||
- '@swc/core'
|
||||
@@ -9790,6 +9796,8 @@ snapshots:
|
||||
|
||||
chalk@5.2.0: {}
|
||||
|
||||
change-case@5.4.4: {}
|
||||
|
||||
character-entities-html4@2.1.0: {}
|
||||
|
||||
character-entities-legacy@3.0.0: {}
|
||||
@@ -9983,7 +9991,7 @@ snapshots:
|
||||
dependencies:
|
||||
'@types/node': 20.5.1
|
||||
cosmiconfig: 8.3.6(typescript@5.5.3)
|
||||
ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.5.3)
|
||||
ts-node: 10.9.2(@types/node@20.11.27)(typescript@5.5.3)
|
||||
typescript: 5.5.3
|
||||
|
||||
cosmiconfig@8.1.3:
|
||||
@@ -10626,11 +10634,11 @@ snapshots:
|
||||
postcss: 8.4.38
|
||||
tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))
|
||||
|
||||
eslint-plugin-tailwindcss@3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))):
|
||||
eslint-plugin-tailwindcss@3.13.1(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))):
|
||||
dependencies:
|
||||
fast-glob: 3.3.2
|
||||
postcss: 8.4.38
|
||||
tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))
|
||||
tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
|
||||
|
||||
eslint-plugin-turbo@1.9.9(eslint@8.44.0):
|
||||
dependencies:
|
||||
@@ -12542,9 +12550,9 @@ snapshots:
|
||||
- markdown-wasm
|
||||
- supports-color
|
||||
|
||||
next-themes@0.2.1(next@14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
|
||||
next-themes@0.2.1(next@14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
|
||||
dependencies:
|
||||
next: 14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
|
||||
next: 14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
|
||||
@@ -12554,7 +12562,7 @@ snapshots:
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
|
||||
next@14.1.3(@babel/core@7.22.1)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
|
||||
next@14.1.3(@babel/core@7.24.6)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
|
||||
dependencies:
|
||||
'@next/env': 14.1.3
|
||||
'@swc/helpers': 0.5.2
|
||||
@@ -12564,7 +12572,7 @@ snapshots:
|
||||
postcss: 8.4.31
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
styled-jsx: 5.1.1(@babel/core@7.22.1)(react@18.2.0)
|
||||
styled-jsx: 5.1.1(@babel/core@7.24.6)(react@18.2.0)
|
||||
optionalDependencies:
|
||||
'@next/swc-darwin-arm64': 14.1.3
|
||||
'@next/swc-darwin-x64': 14.1.3
|
||||
@@ -12887,13 +12895,13 @@ snapshots:
|
||||
camelcase-css: 2.0.1
|
||||
postcss: 8.4.38
|
||||
|
||||
postcss-load-config@3.1.4(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5)):
|
||||
postcss-load-config@3.1.4(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5)):
|
||||
dependencies:
|
||||
lilconfig: 2.1.0
|
||||
yaml: 1.10.2
|
||||
optionalDependencies:
|
||||
postcss: 8.4.38
|
||||
ts-node: 10.9.2(@types/node@20.11.27)(typescript@4.9.5)
|
||||
ts-node: 10.9.2(@types/node@20.14.0)(typescript@4.9.5)
|
||||
|
||||
postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3)):
|
||||
dependencies:
|
||||
@@ -12903,13 +12911,13 @@ snapshots:
|
||||
postcss: 8.4.38
|
||||
ts-node: 10.9.2(@types/node@17.0.45)(typescript@5.5.3)
|
||||
|
||||
postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3)):
|
||||
postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)):
|
||||
dependencies:
|
||||
lilconfig: 3.1.1
|
||||
yaml: 2.4.3
|
||||
optionalDependencies:
|
||||
postcss: 8.4.38
|
||||
ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.5.3)
|
||||
ts-node: 10.9.2(@types/node@20.11.27)(typescript@5.5.3)
|
||||
|
||||
postcss-nested@6.0.1(postcss@8.4.38):
|
||||
dependencies:
|
||||
@@ -13755,6 +13763,13 @@ snapshots:
|
||||
optionalDependencies:
|
||||
'@babel/core': 7.22.1
|
||||
|
||||
styled-jsx@5.1.1(@babel/core@7.24.6)(react@18.2.0):
|
||||
dependencies:
|
||||
client-only: 0.0.1
|
||||
react: 18.2.0
|
||||
optionalDependencies:
|
||||
'@babel/core': 7.24.6
|
||||
|
||||
sucrase@3.35.0:
|
||||
dependencies:
|
||||
'@jridgewell/gen-mapping': 0.3.5
|
||||
@@ -13790,9 +13805,9 @@ snapshots:
|
||||
dependencies:
|
||||
tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3))
|
||||
|
||||
tailwindcss-animate@1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))):
|
||||
tailwindcss-animate@1.0.6(tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))):
|
||||
dependencies:
|
||||
tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))
|
||||
tailwindcss: 3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
|
||||
|
||||
tailwindcss@3.3.7(ts-node@10.9.2(@types/node@17.0.45)(typescript@5.5.3)):
|
||||
dependencies:
|
||||
@@ -13821,7 +13836,7 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- ts-node
|
||||
|
||||
tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3)):
|
||||
tailwindcss@3.3.7(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3)):
|
||||
dependencies:
|
||||
'@alloc/quick-lru': 5.2.0
|
||||
arg: 5.0.2
|
||||
@@ -13840,7 +13855,7 @@ snapshots:
|
||||
postcss: 8.4.38
|
||||
postcss-import: 15.1.0(postcss@8.4.38)
|
||||
postcss-js: 4.0.1(postcss@8.4.38)
|
||||
postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))
|
||||
postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))
|
||||
postcss-nested: 6.0.1(postcss@8.4.38)
|
||||
postcss-selector-parser: 6.1.0
|
||||
resolve: 1.22.8
|
||||
@@ -13971,7 +13986,7 @@ snapshots:
|
||||
yn: 3.1.1
|
||||
optional: true
|
||||
|
||||
ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5):
|
||||
ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3):
|
||||
dependencies:
|
||||
'@cspotcode/source-map-support': 0.8.1
|
||||
'@tsconfig/node10': 1.0.11
|
||||
@@ -13985,28 +14000,28 @@ snapshots:
|
||||
create-require: 1.1.1
|
||||
diff: 4.0.2
|
||||
make-error: 1.3.6
|
||||
typescript: 4.9.5
|
||||
typescript: 5.5.3
|
||||
v8-compile-cache-lib: 3.0.1
|
||||
yn: 3.1.1
|
||||
optional: true
|
||||
|
||||
ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3):
|
||||
ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5):
|
||||
dependencies:
|
||||
'@cspotcode/source-map-support': 0.8.1
|
||||
'@tsconfig/node10': 1.0.11
|
||||
'@tsconfig/node12': 1.0.11
|
||||
'@tsconfig/node14': 1.0.3
|
||||
'@tsconfig/node16': 1.0.4
|
||||
'@types/node': 20.5.1
|
||||
'@types/node': 20.14.0
|
||||
acorn: 8.11.3
|
||||
acorn-walk: 8.3.2
|
||||
arg: 4.1.3
|
||||
create-require: 1.1.1
|
||||
diff: 4.0.2
|
||||
make-error: 1.3.6
|
||||
typescript: 5.5.3
|
||||
typescript: 4.9.5
|
||||
v8-compile-cache-lib: 3.0.1
|
||||
yn: 3.1.1
|
||||
optional: true
|
||||
|
||||
ts-pattern@5.2.0: {}
|
||||
|
||||
@@ -14031,7 +14046,7 @@ snapshots:
|
||||
|
||||
tslib@2.6.2: {}
|
||||
|
||||
tsup@6.6.3(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5))(typescript@4.9.5):
|
||||
tsup@6.6.3(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))(typescript@4.9.5):
|
||||
dependencies:
|
||||
bundle-require: 4.2.1(esbuild@0.17.19)
|
||||
cac: 6.7.14
|
||||
@@ -14041,7 +14056,7 @@ snapshots:
|
||||
execa: 5.1.1
|
||||
globby: 11.1.0
|
||||
joycon: 3.1.1
|
||||
postcss-load-config: 3.1.4(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.11.27)(typescript@4.9.5))
|
||||
postcss-load-config: 3.1.4(postcss@8.4.38)(ts-node@10.9.2(@types/node@20.14.0)(typescript@4.9.5))
|
||||
resolve-from: 5.0.0
|
||||
rollup: 3.29.4
|
||||
source-map: 0.8.0-beta.0
|
||||
|
||||
Reference in New Issue
Block a user