feat: Blocks (#428)
* chore: build registry * feat: block preview * refactor: change to use iframe feat: add more blocks * chore: fix build * feat: add all other blocks * feat: add copy button * chore: cleanup
This commit is contained in:
zernonia
GitHub
parent
8982ec3862
commit
a03bace32c
18
apps/www/.vitepress/theme/components/Announcement.vue
Normal file
18
apps/www/.vitepress/theme/components/Announcement.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<script setup lang="ts">
|
||||
import { announcementConfig } from '../config/site'
|
||||
import ArrowRightIcon from '~icons/radix-icons/arrow-right'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a
|
||||
:href="announcementConfig.link"
|
||||
class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
|
||||
>
|
||||
{{ announcementConfig.icon }} <Separator class="mx-2 h-4" orientation="vertical" />
|
||||
<span class="sm:hidden">{{ announcementConfig.title }}</span>
|
||||
<span class="hidden sm:inline">
|
||||
{{ announcementConfig.title }}
|
||||
</span>
|
||||
<ArrowRightIcon class="ml-1 h-4 w-4" />
|
||||
</a>
|
||||
</template>
|
||||
38
apps/www/.vitepress/theme/components/BlockCopyButton.vue
Normal file
38
apps/www/.vitepress/theme/components/BlockCopyButton.vue
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<script setup lang="ts">
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import { toRefs } from 'vue'
|
||||
import { CheckIcon, ClipboardIcon } from '@radix-icons/vue'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from '@/lib/registry/new-york/ui/tooltip'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
code?: string
|
||||
}>(), {
|
||||
code: '',
|
||||
})
|
||||
const { code } = toRefs(props)
|
||||
|
||||
const { copy, copied } = useClipboard({ source: code })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tooltip :delay-duration="100">
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
class="h-7 w-7 [&_svg]:size-3.5"
|
||||
@click="copy()"
|
||||
>
|
||||
<span class="sr-only">Copy</span>
|
||||
<CheckIcon v-if="copied" />
|
||||
<ClipboardIcon v-else />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Copy code</TooltipContent>
|
||||
</Tooltip>
|
||||
</template>
|
||||
12
apps/www/.vitepress/theme/components/BlockPage.vue
Normal file
12
apps/www/.vitepress/theme/components/BlockPage.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { useUrlSearchParams } from '@vueuse/core'
|
||||
import ComponentLoader from './ComponentLoader.vue'
|
||||
|
||||
const params = useUrlSearchParams('hash-params')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="params.name && params.style" :class="params.containerClass">
|
||||
<ComponentLoader :key="params.style?.toString()" :name="params.name?.toString()" :type-name="'block'" />
|
||||
</div>
|
||||
</template>
|
||||
245
apps/www/.vitepress/theme/components/BlockPreview.vue
Normal file
245
apps/www/.vitepress/theme/components/BlockPreview.vue
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
<script setup lang="ts">
|
||||
import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import { codeToHtml } from 'shiki'
|
||||
import { compileScript, parse, walk } from 'vue/compiler-sfc'
|
||||
import MagicString from 'magic-string'
|
||||
import { cssVariables } from '../config/shiki'
|
||||
import StyleSwitcher from './StyleSwitcher.vue'
|
||||
import Spinner from './Spinner.vue'
|
||||
import BlockCopyButton from './BlockCopyButton.vue'
|
||||
import { useConfigStore } from '@/stores/config'
|
||||
|
||||
// import { V0Button } from '@/components/v0-button'
|
||||
import { Badge } from '@/lib/registry/new-york/ui/badge'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
|
||||
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/lib/registry/new-york/ui/resizable'
|
||||
import { Separator } from '@/lib/registry/new-york/ui/separator'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/new-york/ui/tabs'
|
||||
import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
|
||||
|
||||
const props = defineProps<{
|
||||
name: string
|
||||
}>()
|
||||
|
||||
const { style, codeConfig } = useConfigStore()
|
||||
|
||||
const isLoading = ref(true)
|
||||
const tabValue = ref('preview')
|
||||
const resizableRef = ref<InstanceType<typeof ResizablePanel>>()
|
||||
|
||||
const rawString = ref('')
|
||||
const codeHtml = ref('')
|
||||
const metadata = reactive({
|
||||
description: null as string | null,
|
||||
iframeHeight: null as string | null,
|
||||
containerClass: null as string | null,
|
||||
})
|
||||
|
||||
function removeScript(code: string) {
|
||||
const s = new MagicString(code)
|
||||
const scriptTagRegex = /<script\s+lang="ts"\s*>[\s\S]+?<\/script>/g
|
||||
let match
|
||||
// eslint-disable-next-line no-cond-assign
|
||||
while ((match = scriptTagRegex.exec(code)) !== null) {
|
||||
const start = match.index
|
||||
const end = match.index + match[0].length
|
||||
s.overwrite(start, end, '') // Replace the script tag with an empty string
|
||||
}
|
||||
return s.trimStart().toString()
|
||||
}
|
||||
|
||||
function transformImportPath(code: string) {
|
||||
const s = new MagicString(code)
|
||||
s.replaceAll(`@/lib/registry/${style.value}`, codeConfig.value.componentsPath)
|
||||
s.replaceAll(`@/lib/utils`, codeConfig.value.utilsPath)
|
||||
return s.toString()
|
||||
}
|
||||
|
||||
watch([style, codeConfig], async () => {
|
||||
try {
|
||||
const baseRawString = await import(`../../../src/lib/registry/${style.value}/block/${props.name}.vue?raw`).then(res => res.default.trim())
|
||||
rawString.value = transformImportPath(removeScript(baseRawString))
|
||||
|
||||
if (!metadata.description) {
|
||||
const { descriptor } = parse(baseRawString)
|
||||
const ast = compileScript(descriptor, { id: '' })
|
||||
walk(ast.scriptAst, {
|
||||
enter(node: any) {
|
||||
const declaration = node.declaration
|
||||
// Check if the declaration is a variable declaration
|
||||
if (declaration?.type === 'VariableDeclaration') {
|
||||
// Extract variable names and their values
|
||||
declaration.declarations.forEach((decl: any) => {
|
||||
// @ts-expect-error ignore missing type
|
||||
metadata[decl.id.name] = decl.init ? decl.init.value : null
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
codeHtml.value = await codeToHtml(rawString.value, {
|
||||
lang: 'vue',
|
||||
theme: cssVariables,
|
||||
})
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}, { immediate: true, deep: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tabs
|
||||
:id="name"
|
||||
v-model="tabValue"
|
||||
class="relative grid w-full scroll-m-20 gap-4"
|
||||
:style=" {
|
||||
'--container-height': metadata.iframeHeight ?? '600px',
|
||||
}"
|
||||
>
|
||||
<div class="flex flex-col items-center gap-4 sm:flex-row">
|
||||
<div class="flex items-center gap-2">
|
||||
<TabsList class="hidden sm:flex">
|
||||
<TabsTrigger value="preview">
|
||||
Preview
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="code">
|
||||
Code
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<div class="hidden items-center gap-2 sm:flex">
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
class="mx-2 hidden h-4 md:flex"
|
||||
/>
|
||||
<div class="flex items-center gap-2">
|
||||
<a :href="`#${name}`">
|
||||
<Badge variant="outline">{{ name }}</Badge>
|
||||
</a>
|
||||
<Popover>
|
||||
<PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
|
||||
<Info class="h-3.5 w-3.5" />
|
||||
<span class="sr-only">Block description</span>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
side="right"
|
||||
:side-offset="10"
|
||||
class="text-sm"
|
||||
>
|
||||
{{ metadata.description }}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 pr-[14px] sm:ml-auto">
|
||||
<div class="hidden h-[28px] items-center gap-1.5 rounded-md border p-[2px] shadow-sm md:flex">
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
default-value="100"
|
||||
@update:model-value="(value) => {
|
||||
resizableRef?.resize(parseInt(value))
|
||||
}"
|
||||
>
|
||||
<ToggleGroupItem
|
||||
value="100"
|
||||
class="h-[22px] w-[22px] rounded-sm p-0"
|
||||
>
|
||||
<Monitor class="h-3.5 w-3.5" />
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="60"
|
||||
class="h-[22px] w-[22px] rounded-sm p-0"
|
||||
>
|
||||
<Tablet class="h-3.5 w-3.5" />
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
value="25"
|
||||
class="h-[22px] w-[22px] rounded-sm p-0"
|
||||
>
|
||||
<Smartphone class="h-3.5 w-3.5" />
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
class="mx-2 hidden h-4 md:flex"
|
||||
/>
|
||||
<StyleSwitcher class="h-7" />
|
||||
<Popover>
|
||||
<PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
|
||||
<CircleHelp class="h-3.5 w-3.5" />
|
||||
<span class="sr-only">Block description</span>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
side="top"
|
||||
:side-offset="20"
|
||||
class="space-y-3 rounded-[0.5rem] text-sm"
|
||||
>
|
||||
<p class="font-medium">
|
||||
What is the difference between the New York and Default style?
|
||||
</p>
|
||||
<p>
|
||||
A style comes with its own set of components, animations,
|
||||
icons and more.
|
||||
</p>
|
||||
<p>
|
||||
The <span class="font-medium">Default</span> style has
|
||||
larger inputs, uses lucide-react for icons and
|
||||
tailwindcss-animate for animations.
|
||||
</p>
|
||||
<p>
|
||||
The <span class="font-medium">New York</span> style ships
|
||||
with smaller buttons and inputs. It also uses shadows on cards
|
||||
and buttons.
|
||||
</p>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Separator orientation="vertical" class="mx-2 h-4" />
|
||||
<BlockCopyButton :code="rawString" />
|
||||
<!-- <V0Button
|
||||
name="{block.name}"
|
||||
description="{block.description" || "Edit in v0"}
|
||||
code="{block.code}"
|
||||
style="{block.style}"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
<TabsContent
|
||||
v-show="tabValue === 'preview'"
|
||||
force-mount
|
||||
value="preview"
|
||||
class="relative after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-lg after:bg-muted h-[--container-height] px-0"
|
||||
>
|
||||
<ResizablePanelGroup id="block-resizable" direction="horizontal" class="relative z-10">
|
||||
<ResizablePanel
|
||||
id="block-resizable-panel-1"
|
||||
ref="resizableRef"
|
||||
class="relative rounded-lg border bg-background transition-all "
|
||||
:default-size="100"
|
||||
:min-size="25"
|
||||
>
|
||||
<div v-if="isLoading" class="flex items-center justify-center h-full">
|
||||
<Spinner />
|
||||
</div>
|
||||
<iframe
|
||||
v-show="!isLoading"
|
||||
:src="`/blocks/renderer#name=${name}&style=${style}&containerClass=${encodeURIComponent(metadata.containerClass ?? '')}`"
|
||||
class="relative z-20 w-full bg-background h-[--container-height]"
|
||||
@load="isLoading = false"
|
||||
/>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle id="block-resizable-handle" class="relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 sm:block" />
|
||||
<ResizablePanel id="block-resizable-panel-2" :default-size="0" :min-size="0" />
|
||||
</ResizablePanelGroup>
|
||||
</TabsContent>
|
||||
<TabsContent value="code" class="h-[--container-height]">
|
||||
<div
|
||||
class="language-vue !h-full !max-h-[none] !mt-0"
|
||||
v-html="codeHtml"
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</template>
|
||||
53
apps/www/.vitepress/theme/components/Blocks.vue
Normal file
53
apps/www/.vitepress/theme/components/Blocks.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import PageHeader from '../components/PageHeader.vue'
|
||||
import PageHeaderHeading from '../components/PageHeaderHeading.vue'
|
||||
import PageHeaderDescription from '../components/PageHeaderDescription.vue'
|
||||
import PageAction from '../components/PageAction.vue'
|
||||
import Announcement from '../components/Announcement.vue'
|
||||
import BlockPreview from './BlockPreview.vue'
|
||||
import GitHubIcon from '~icons/radix-icons/github-logo'
|
||||
|
||||
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const blocks = ref<string[]>([])
|
||||
|
||||
import('../../../__registry__/index').then((res) => {
|
||||
blocks.value = Object.values(res.Index.default).filter(i => i.type === 'components:block').map(i => i.name)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader class="page-header pb-8">
|
||||
<Announcement />
|
||||
<PageHeaderHeading>Building Blocks for the Web</PageHeaderHeading>
|
||||
<PageHeaderDescription>
|
||||
Beautifully designed. Copy and paste into your apps. Open Source.
|
||||
</PageHeaderDescription>
|
||||
|
||||
<PageAction>
|
||||
<a
|
||||
href="/blocks.html#blocks"
|
||||
:class="cn(buttonVariants(), 'rounded-[6px]')"
|
||||
>
|
||||
Browse
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/radix-vue/shadcn-vue"
|
||||
target="_blank"
|
||||
:class="cn(
|
||||
buttonVariants({ variant: 'outline' }),
|
||||
'rounded-[6px]',
|
||||
)"
|
||||
>
|
||||
<GitHubIcon class="mr-2 h-4 w-4" />
|
||||
GitHub
|
||||
</a>
|
||||
</PageAction>
|
||||
</PageHeader>
|
||||
|
||||
<section id="blocks" class="grid scroll-mt-24 gap-24 lg:gap-48">
|
||||
<BlockPreview v-for="block in blocks" :key="block" :name="block" />
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -5,12 +5,13 @@ import { useConfigStore } from '@/stores/config'
|
|||
|
||||
const props = defineProps<{
|
||||
name: string
|
||||
typeName?: 'example' | 'block'
|
||||
}>()
|
||||
const { style } = useConfigStore()
|
||||
|
||||
const Component = defineAsyncComponent({
|
||||
loadingComponent: Spinner,
|
||||
loader: () => import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue`),
|
||||
loader: () => import(`../../../src/lib/registry/${style.value}/${props.typeName}/${props.name}.vue`),
|
||||
timeout: 5000,
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ watch([style, codeConfig], async () => {
|
|||
'items-end': align === 'end',
|
||||
})"
|
||||
>
|
||||
<ComponentLoader v-bind="$attrs" :key="style" :name="name" />
|
||||
<ComponentLoader v-bind="$attrs" :key="style" :name="name" :type-name="'example'" />
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="code">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
|
|||
import PageHeaderDescription from '../components/PageHeaderDescription.vue'
|
||||
import PageAction from '../components/PageAction.vue'
|
||||
import ExamplesNav from '../components/ExamplesNav.vue'
|
||||
import { announcementConfig } from '../config/site'
|
||||
import Announcement from '../components/Announcement.vue'
|
||||
import GitHubIcon from '~icons/radix-icons/github-logo'
|
||||
|
||||
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
|
||||
|
|
@ -16,16 +16,7 @@ import MailExample from '@/examples/mail/Example.vue'
|
|||
|
||||
<template>
|
||||
<PageHeader class="page-header pb-8">
|
||||
<a
|
||||
:href="announcementConfig.link"
|
||||
class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
|
||||
>
|
||||
{{ announcementConfig.icon }} <Separator class="mx-2 h-4" orientation="vertical" />
|
||||
<span class="sm:hidden">{{ announcementConfig.title }}</span>
|
||||
<span class="hidden sm:inline">{{ announcementConfig.title }}
|
||||
</span>
|
||||
<!-- <ArrowRightIcon class="ml-1 h-4 w-4" /> -->
|
||||
</a>
|
||||
<Announcement />
|
||||
<PageHeaderHeading>Build your component library.</PageHeaderHeading>
|
||||
<PageHeaderDescription>
|
||||
Beautifully designed components that you can copy and paste into your
|
||||
|
|
|
|||
|
|
@ -38,6 +38,10 @@ export const docsConfig: DocsConfig = {
|
|||
title: 'Examples',
|
||||
href: '/examples/mail',
|
||||
},
|
||||
{
|
||||
title: 'Blocks',
|
||||
href: '/blocks',
|
||||
},
|
||||
{
|
||||
title: 'GitHub',
|
||||
href: 'https://github.com/radix-vue/shadcn-vue',
|
||||
|
|
|
|||
|
|
@ -15,6 +15,6 @@ export const siteConfig = {
|
|||
|
||||
export const announcementConfig = {
|
||||
icon: '✨',
|
||||
title: 'New components!',
|
||||
link: '/docs/components/carousel.html',
|
||||
title: 'Introducing Blocks!',
|
||||
link: '/blocks',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
|
|||
import PageHeaderDescription from '../components/PageHeaderDescription.vue'
|
||||
import PageAction from '../components/PageAction.vue'
|
||||
import ExamplesNav from '../components/ExamplesNav.vue'
|
||||
import { announcementConfig } from '../config/site'
|
||||
import ArrowRightIcon from '~icons/radix-icons/arrow-right'
|
||||
import Announcement from '../components/Announcement.vue'
|
||||
|
||||
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
|
||||
import { Separator } from '@/lib/registry/new-york/ui/separator'
|
||||
|
|
@ -15,17 +14,7 @@ import { cn } from '@/lib/utils'
|
|||
<template>
|
||||
<div class="container relative">
|
||||
<PageHeader class="page-header pb-8">
|
||||
<a
|
||||
:href="announcementConfig.link"
|
||||
class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
|
||||
>
|
||||
{{ announcementConfig.icon }} <Separator class="mx-2 h-4" orientation="vertical" />
|
||||
<span class="sm:hidden">{{ announcementConfig.title }}</span>
|
||||
<span class="hidden sm:inline">
|
||||
{{ announcementConfig.title }}
|
||||
</span>
|
||||
<ArrowRightIcon class="ml-1 h-4 w-4" />
|
||||
</a>
|
||||
<Announcement />
|
||||
<PageHeaderHeading class="hidden md:block">
|
||||
Check out some examples.
|
||||
</PageHeaderHeading>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
|
|||
import { Toaster as DefaultToaster } from '@/lib/registry/default/ui/toast'
|
||||
import { Toaster as NewYorkSonner } from '@/lib/registry/new-york/ui/sonner'
|
||||
import { Toaster as NewYorkToaster } from '@/lib/registry/new-york/ui/toast'
|
||||
import { TooltipProvider } from '@/lib/registry/new-york/ui/tooltip'
|
||||
|
||||
import File from '~icons/radix-icons/file'
|
||||
import Circle from '~icons/radix-icons/circle'
|
||||
|
|
@ -84,7 +85,11 @@ watch(() => $route.path, (n) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div vaul-drawer-wrapper class="flex min-h-screen flex-col bg-background">
|
||||
<TooltipProvider>
|
||||
<div v-if="$route.data.frontmatter.layout === false">
|
||||
<Content :key="$route.path" />
|
||||
</div>
|
||||
<div v-else vaul-drawer-wrapper class="flex min-h-screen flex-col bg-background">
|
||||
<header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
|
||||
<div
|
||||
class="container flex h-14 max-w-screen-2xl items-center"
|
||||
|
|
@ -298,4 +303,5 @@ watch(() => $route.path, (n) => {
|
|||
<NewYorkSonner :theme="'system'" />
|
||||
<NewYorkToaster />
|
||||
</div>
|
||||
</template>../components/CodeConfigCustomizer.vue
|
||||
</TooltipProvider>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1102,6 +1102,62 @@ export const Index = {
|
|||
component: () => import("../src/lib/registry/default/example/Cards/Metric.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/example/Cards/Metric.vue"],
|
||||
},
|
||||
"Authentication01": {
|
||||
name: "Authentication01",
|
||||
type: "components:block",
|
||||
registryDependencies: ["button","card","input","label"],
|
||||
component: () => import("../src/lib/registry/default/block/Authentication01.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/block/Authentication01.vue"],
|
||||
},
|
||||
"Authentication02": {
|
||||
name: "Authentication02",
|
||||
type: "components:block",
|
||||
registryDependencies: ["button","card","input","label"],
|
||||
component: () => import("../src/lib/registry/default/block/Authentication02.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/block/Authentication02.vue"],
|
||||
},
|
||||
"Authentication03": {
|
||||
name: "Authentication03",
|
||||
type: "components:block",
|
||||
registryDependencies: ["button","card","input","label"],
|
||||
component: () => import("../src/lib/registry/default/block/Authentication03.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/block/Authentication03.vue"],
|
||||
},
|
||||
"Authentication04": {
|
||||
name: "Authentication04",
|
||||
type: "components:block",
|
||||
registryDependencies: ["button","input","label"],
|
||||
component: () => import("../src/lib/registry/default/block/Authentication04.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/block/Authentication04.vue"],
|
||||
},
|
||||
"Dashboard01": {
|
||||
name: "Dashboard01",
|
||||
type: "components:block",
|
||||
registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
|
||||
component: () => import("../src/lib/registry/default/block/Dashboard01.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/block/Dashboard01.vue"],
|
||||
},
|
||||
"Dashboard02": {
|
||||
name: "Dashboard02",
|
||||
type: "components:block",
|
||||
registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
|
||||
component: () => import("../src/lib/registry/default/block/Dashboard02.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/block/Dashboard02.vue"],
|
||||
},
|
||||
"Dashboard03": {
|
||||
name: "Dashboard03",
|
||||
type: "components:block",
|
||||
registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
|
||||
component: () => import("../src/lib/registry/default/block/Dashboard03.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/block/Dashboard03.vue"],
|
||||
},
|
||||
"Dashboard04": {
|
||||
name: "Dashboard04",
|
||||
type: "components:block",
|
||||
registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
|
||||
component: () => import("../src/lib/registry/default/block/Dashboard04.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/default/block/Dashboard04.vue"],
|
||||
},
|
||||
}, "new-york": {
|
||||
"AccordionDemo": {
|
||||
name: "AccordionDemo",
|
||||
|
|
@ -2202,5 +2258,61 @@ export const Index = {
|
|||
component: () => import("../src/lib/registry/new-york/example/Cards/Metric.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/example/Cards/Metric.vue"],
|
||||
},
|
||||
"Authentication01": {
|
||||
name: "Authentication01",
|
||||
type: "components:block",
|
||||
registryDependencies: ["button","card","input","label"],
|
||||
component: () => import("../src/lib/registry/new-york/block/Authentication01.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/block/Authentication01.vue"],
|
||||
},
|
||||
"Authentication02": {
|
||||
name: "Authentication02",
|
||||
type: "components:block",
|
||||
registryDependencies: ["button","card","input","label"],
|
||||
component: () => import("../src/lib/registry/new-york/block/Authentication02.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/block/Authentication02.vue"],
|
||||
},
|
||||
"Authentication03": {
|
||||
name: "Authentication03",
|
||||
type: "components:block",
|
||||
registryDependencies: ["button","card","input","label"],
|
||||
component: () => import("../src/lib/registry/new-york/block/Authentication03.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/block/Authentication03.vue"],
|
||||
},
|
||||
"Authentication04": {
|
||||
name: "Authentication04",
|
||||
type: "components:block",
|
||||
registryDependencies: ["button","input","label"],
|
||||
component: () => import("../src/lib/registry/new-york/block/Authentication04.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/block/Authentication04.vue"],
|
||||
},
|
||||
"Dashboard01": {
|
||||
name: "Dashboard01",
|
||||
type: "components:block",
|
||||
registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
|
||||
component: () => import("../src/lib/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/block/Dashboard01.vue"],
|
||||
},
|
||||
"Dashboard02": {
|
||||
name: "Dashboard02",
|
||||
type: "components:block",
|
||||
registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
|
||||
component: () => import("../src/lib/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/block/Dashboard02.vue"],
|
||||
},
|
||||
"Dashboard03": {
|
||||
name: "Dashboard03",
|
||||
type: "components:block",
|
||||
registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
|
||||
component: () => import("../src/lib/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/block/Dashboard03.vue"],
|
||||
},
|
||||
"Dashboard04": {
|
||||
name: "Dashboard04",
|
||||
type: "components:block",
|
||||
registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
|
||||
component: () => import("../src/lib/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
|
||||
files: ["../src/lib/registry/new-york/block/Dashboard04.vue"],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
9
apps/www/src/content/blocks.md
Normal file
9
apps/www/src/content/blocks.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Building Blocks
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import Blocks from "../../.vitepress/theme/components/Blocks.vue"
|
||||
</script>
|
||||
|
||||
<Blocks />
|
||||
10
apps/www/src/content/blocks/renderer.md
Normal file
10
apps/www/src/content/blocks/renderer.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: Blocks - shadcn-vue
|
||||
layout: false
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import BlockPage from "../../../.vitepress/theme/components/BlockPage.vue"
|
||||
</script>
|
||||
|
||||
<BlockPage />
|
||||
41
apps/www/src/lib/registry/default/block/Authentication01.vue
Normal file
41
apps/www/src/lib/registry/default/block/Authentication01.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<script lang="ts">
|
||||
export const description
|
||||
= 'A simple login form with email and password. The submit button says \'Sign in\'.'
|
||||
export const iframeHeight = '600px'
|
||||
export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="w-full max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-2xl">
|
||||
Login
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your email below to login to your account.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email</Label>
|
||||
<Input id="email" type="email" placeholder="m@example.com" required />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="password">Password</Label>
|
||||
<Input id="password" type="password" required />
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button class="w-full">
|
||||
Sign in
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
60
apps/www/src/lib/registry/default/block/Authentication02.vue
Normal file
60
apps/www/src/lib/registry/default/block/Authentication02.vue
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
<script lang="ts">
|
||||
export const description
|
||||
= 'A login form with email and password. There\'s an option to login with Google and a link to sign up if you don\'t have an account.'
|
||||
export const iframeHeight = '600px'
|
||||
export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="mx-auto max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-2xl">
|
||||
Login
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your email below to login to your account
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="grid gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="m@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<div class="flex items-center">
|
||||
<Label for="password">Password</Label>
|
||||
<a href="#" class="ml-auto inline-block text-sm underline">
|
||||
Forgot your password?
|
||||
</a>
|
||||
</div>
|
||||
<Input id="password" type="password" required />
|
||||
</div>
|
||||
<Button type="submit" class="w-full">
|
||||
Login
|
||||
</Button>
|
||||
<Button variant="outline" class="w-full">
|
||||
Login with Google
|
||||
</Button>
|
||||
</div>
|
||||
<div class="mt-4 text-center text-sm">
|
||||
Don't have an account?
|
||||
<a href="#" class="underline">
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
65
apps/www/src/lib/registry/default/block/Authentication03.vue
Normal file
65
apps/www/src/lib/registry/default/block/Authentication03.vue
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<script lang="ts">
|
||||
export const description
|
||||
= 'A sign up form with first name, last name, email and password inside a card. There\'s an option to sign up with GitHub and a link to login if you already have an account'
|
||||
export const iframeHeight = '600px'
|
||||
export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="mx-auto max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-xl">
|
||||
Sign Up
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your information to create an account
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="grid gap-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="first-name">First name</Label>
|
||||
<Input id="first-name" placeholder="Max" required />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="last-name">Last name</Label>
|
||||
<Input id="last-name" placeholder="Robinson" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="m@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="password">Password</Label>
|
||||
<Input id="password" type="password" />
|
||||
</div>
|
||||
<Button type="submit" class="w-full">
|
||||
Create an account
|
||||
</Button>
|
||||
<Button variant="outline" class="w-full">
|
||||
Sign up with GitHub
|
||||
</Button>
|
||||
</div>
|
||||
<div class="mt-4 text-center text-sm">
|
||||
Already have an account?
|
||||
<a href="#" class="underline">
|
||||
Sign in
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
73
apps/www/src/lib/registry/default/block/Authentication04.vue
Normal file
73
apps/www/src/lib/registry/default/block/Authentication04.vue
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<script lang="ts">
|
||||
export const description
|
||||
= 'A login page with two columns. The first column has the login form with email and password. There\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'
|
||||
export const iframeHeight = '800px'
|
||||
export const containerClass = 'w-full h-full p-4 lg:p-0'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
|
||||
<div class="flex items-center justify-center py-12">
|
||||
<div class="mx-auto grid w-[350px] gap-6">
|
||||
<div class="grid gap-2 text-center">
|
||||
<h1 class="text-3xl font-bold">
|
||||
Login
|
||||
</h1>
|
||||
<p class="text-balance text-muted-foreground">
|
||||
Enter your email below to login to your account
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="m@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<div class="flex items-center">
|
||||
<Label for="password">Password</Label>
|
||||
<a
|
||||
href="/forgot-password"
|
||||
class="ml-auto inline-block text-sm underline"
|
||||
>
|
||||
Forgot your password?
|
||||
</a>
|
||||
</div>
|
||||
<Input id="password" type="password" required />
|
||||
</div>
|
||||
<Button type="submit" class="w-full">
|
||||
Login
|
||||
</Button>
|
||||
<Button variant="outline" class="w-full">
|
||||
Login with Google
|
||||
</Button>
|
||||
</div>
|
||||
<div class="mt-4 text-center text-sm">
|
||||
Don't have an account?
|
||||
<a href="#" class="underline">
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden bg-muted lg:block">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="Image"
|
||||
width="1920"
|
||||
height="1080"
|
||||
class="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
462
apps/www/src/lib/registry/default/block/Dashboard01.vue
Normal file
462
apps/www/src/lib/registry/default/block/Dashboard01.vue
Normal file
|
|
@ -0,0 +1,462 @@
|
|||
<script lang="ts">
|
||||
export const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'
|
||||
export const iframeHeight = '825px'
|
||||
export const containerClass = 'w-full h-full'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/avatar'
|
||||
import { Badge } from '@/lib/registry/default/ui/badge'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/lib/registry/default/ui/table'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex min-h-screen w-full flex-col">
|
||||
<header class="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
|
||||
<nav class="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-2 text-lg font-semibold md:text-base"
|
||||
>
|
||||
<Package2 class="h-6 w-6" />
|
||||
<span class="sr-only">Acme Inc</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Orders
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Customers
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Analytics
|
||||
</a>
|
||||
</nav>
|
||||
<Sheet>
|
||||
<SheetTrigger as-child>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
class="shrink-0 md:hidden"
|
||||
>
|
||||
<Menu class="h-5 w-5" />
|
||||
<span class="sr-only">Toggle navigation menu</span>
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left">
|
||||
<nav class="grid gap-6 text-lg font-medium">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-2 text-lg font-semibold"
|
||||
>
|
||||
<Package2 class="h-6 w-6" />
|
||||
<span class="sr-only">Acme Inc</span>
|
||||
</a>
|
||||
<a href="#" class="hover:text-foreground">
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Orders
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Customers
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Analytics
|
||||
</a>
|
||||
</nav>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<div class="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
|
||||
<form class="ml-auto flex-1 sm:flex-initial">
|
||||
<div class="relative">
|
||||
<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search products..."
|
||||
class="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="secondary" size="icon" class="rounded-full">
|
||||
<CircleUser class="h-5 w-5" />
|
||||
<span class="sr-only">Toggle user menu</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Support</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Logout</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
|
||||
<div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-sm font-medium">
|
||||
Total Revenue
|
||||
</CardTitle>
|
||||
<DollarSign class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
$45,231.89
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
+20.1% from last month
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-sm font-medium">
|
||||
Subscriptions
|
||||
</CardTitle>
|
||||
<Users class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
+2350
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
+180.1% from last month
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-sm font-medium">
|
||||
Sales
|
||||
</CardTitle>
|
||||
<CreditCard class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
+12,234
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
+19% from last month
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-sm font-medium">
|
||||
Active Now
|
||||
</CardTitle>
|
||||
<Activity class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
+573
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
+201 since last hour
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
|
||||
<Card class="xl:col-span-2">
|
||||
<CardHeader class="flex flex-row items-center">
|
||||
<div class="grid gap-2">
|
||||
<CardTitle>Transactions</CardTitle>
|
||||
<CardDescription>
|
||||
Recent transactions from your store.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button as-child size="sm" class="ml-auto gap-1">
|
||||
<a href="#">
|
||||
View All
|
||||
<ArrowUpRight class="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Customer</TableHead>
|
||||
<TableHead class="hidden xl:table-column">
|
||||
Type
|
||||
</TableHead>
|
||||
<TableHead class="hidden xl:table-column">
|
||||
Status
|
||||
</TableHead>
|
||||
<TableHead class="hidden xl:table-column">
|
||||
Date
|
||||
</TableHead>
|
||||
<TableHead class="text-right">
|
||||
Amount
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<div class="font-medium">
|
||||
Liam Johnson
|
||||
</div>
|
||||
<div class="hidden text-sm text-muted-foreground md:inline">
|
||||
liam@example.com
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
Sale
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
<Badge class="text-xs" variant="outline">
|
||||
Approved
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell class="hidden md:table-cell lg:hidden xl:table-column">
|
||||
2023-06-23
|
||||
</TableCell>
|
||||
<TableCell class="text-right">
|
||||
$250.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<div class="font-medium">
|
||||
Olivia Smith
|
||||
</div>
|
||||
<div class="hidden text-sm text-muted-foreground md:inline">
|
||||
olivia@example.com
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
Refund
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
<Badge class="text-xs" variant="outline">
|
||||
Declined
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell class="hidden md:table-cell lg:hidden xl:table-column">
|
||||
2023-06-24
|
||||
</TableCell>
|
||||
<TableCell class="text-right">
|
||||
$150.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<div class="font-medium">
|
||||
Noah Williams
|
||||
</div>
|
||||
<div class="hidden text-sm text-muted-foreground md:inline">
|
||||
noah@example.com
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
Subscription
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
<Badge class="text-xs" variant="outline">
|
||||
Approved
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell class="hidden md:table-cell lg:hidden xl:table-column">
|
||||
2023-06-25
|
||||
</TableCell>
|
||||
<TableCell class="text-right">
|
||||
$350.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<div class="font-medium">
|
||||
Emma Brown
|
||||
</div>
|
||||
<div class="hidden text-sm text-muted-foreground md:inline">
|
||||
emma@example.com
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
Sale
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
<Badge class="text-xs" variant="outline">
|
||||
Approved
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell class="hidden md:table-cell lg:hidden xl:table-column">
|
||||
2023-06-26
|
||||
</TableCell>
|
||||
<TableCell class="text-right">
|
||||
$450.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<div class="font-medium">
|
||||
Liam Johnson
|
||||
</div>
|
||||
<div class="hidden text-sm text-muted-foreground md:inline">
|
||||
liam@example.com
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
Sale
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
<Badge class="text-xs" variant="outline">
|
||||
Approved
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell class="hidden md:table-cell lg:hidden xl:table-column">
|
||||
2023-06-27
|
||||
</TableCell>
|
||||
<TableCell class="text-right">
|
||||
$550.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Sales</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-8">
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar class="hidden h-9 w-9 sm:flex">
|
||||
<AvatarImage src="/avatars/01.png" alt="Avatar" />
|
||||
<AvatarFallback>OM</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid gap-1">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Olivia Martin
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
olivia.martin@email.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-auto font-medium">
|
||||
+$1,999.00
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar class="hidden h-9 w-9 sm:flex">
|
||||
<AvatarImage src="/avatars/02.png" alt="Avatar" />
|
||||
<AvatarFallback>JL</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid gap-1">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Jackson Lee
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
jackson.lee@email.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-auto font-medium">
|
||||
+$39.00
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar class="hidden h-9 w-9 sm:flex">
|
||||
<AvatarImage src="/avatars/03.png" alt="Avatar" />
|
||||
<AvatarFallback>IN</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid gap-1">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Isabella Nguyen
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
isabella.nguyen@email.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-auto font-medium">
|
||||
+$299.00
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar class="hidden h-9 w-9 sm:flex">
|
||||
<AvatarImage src="/avatars/04.png" alt="Avatar" />
|
||||
<AvatarFallback>WK</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid gap-1">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
William Kim
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
will@email.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-auto font-medium">
|
||||
+$99.00
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar class="hidden h-9 w-9 sm:flex">
|
||||
<AvatarImage src="/avatars/05.png" alt="Avatar" />
|
||||
<AvatarFallback>SD</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid gap-1">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Sofia Davis
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
sofia.davis@email.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-auto font-medium">
|
||||
+$39.00
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
222
apps/www/src/lib/registry/default/block/Dashboard02.vue
Normal file
222
apps/www/src/lib/registry/default/block/Dashboard02.vue
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
<script lang="ts">
|
||||
export const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'
|
||||
export const iframeHeight = '800px'
|
||||
export const containerClass = 'w-full h-full'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'
|
||||
|
||||
import { Badge } from '@/lib/registry/default/ui/badge'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
|
||||
<div class="hidden border-r bg-muted/40 md:block">
|
||||
<div class="flex h-full max-h-screen flex-col gap-2">
|
||||
<div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
|
||||
<a href="/" class="flex items-center gap-2 font-semibold">
|
||||
<Package2 class="h-6 w-6" />
|
||||
<span class="">Acme Inc</span>
|
||||
</a>
|
||||
<Button variant="outline" size="icon" class="ml-auto h-8 w-8">
|
||||
<Bell class="h-4 w-4" />
|
||||
<span class="sr-only">Toggle notifications</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<nav class="grid items-start px-2 text-sm font-medium lg:px-4">
|
||||
<a
|
||||
href="/"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
|
||||
>
|
||||
<Home class="h-4 w-4" />
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
|
||||
>
|
||||
<ShoppingCart class="h-4 w-4" />
|
||||
Orders
|
||||
<Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
|
||||
6
|
||||
</Badge>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
|
||||
>
|
||||
<Package class="h-4 w-4" />
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
|
||||
>
|
||||
<Users class="h-4 w-4" />
|
||||
Customers
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
|
||||
>
|
||||
<LineChart class="h-4 w-4" />
|
||||
Analytics
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="mt-auto p-4">
|
||||
<Card>
|
||||
<CardHeader class="p-2 pt-0 md:p-4">
|
||||
<CardTitle>Upgrade to Pro</CardTitle>
|
||||
<CardDescription>
|
||||
Unlock all features and get unlimited access to our support
|
||||
team.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="p-2 pt-0 md:p-4 md:pt-0">
|
||||
<Button size="sm" class="w-full">
|
||||
Upgrade
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<header class="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
|
||||
<Sheet>
|
||||
<SheetTrigger as-child>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
class="shrink-0 md:hidden"
|
||||
>
|
||||
<Menu class="h-5 w-5" />
|
||||
<span class="sr-only">Toggle navigation menu</span>
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left" class="flex flex-col">
|
||||
<nav class="grid gap-2 text-lg font-medium">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-2 text-lg font-semibold"
|
||||
>
|
||||
<Package2 class="h-6 w-6" />
|
||||
<span class="sr-only">Acme Inc</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Home class="h-5 w-5" />
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
|
||||
>
|
||||
<ShoppingCart class="h-5 w-5" />
|
||||
Orders
|
||||
<Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
|
||||
6
|
||||
</Badge>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Package class="h-5 w-5" />
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Users class="h-5 w-5" />
|
||||
Customers
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<LineChart class="h-5 w-5" />
|
||||
Analytics
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Upgrade to Pro</CardTitle>
|
||||
<CardDescription>
|
||||
Unlock all features and get unlimited access to our
|
||||
support team.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button size="sm" class="w-full">
|
||||
Upgrade
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<div class="w-full flex-1">
|
||||
<form>
|
||||
<div class="relative">
|
||||
<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search products..."
|
||||
class="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="secondary" size="icon" class="rounded-full">
|
||||
<CircleUser class="h-5 w-5" />
|
||||
<span class="sr-only">Toggle user menu</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Support</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Logout</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</header>
|
||||
<main class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
|
||||
<div class="flex items-center">
|
||||
<h1 class="text-lg font-semibold md:text-2xl">
|
||||
Inventory
|
||||
</h1>
|
||||
</div>
|
||||
<div class="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
|
||||
<div class="flex flex-col items-center gap-1 text-center">
|
||||
<h3 class="text-2xl font-bold tracking-tight">
|
||||
You have no products
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
You can start selling as soon as you add a product.
|
||||
</p>
|
||||
<Button class="mt-4">
|
||||
Add Product
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
441
apps/www/src/lib/registry/default/block/Dashboard03.vue
Normal file
441
apps/www/src/lib/registry/default/block/Dashboard03.vue
Normal file
|
|
@ -0,0 +1,441 @@
|
|||
<script lang="ts">
|
||||
export const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'
|
||||
export const iframeHeight = '740px'
|
||||
export const containerClass = 'w-full h-full'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'
|
||||
|
||||
import { Badge } from '@/lib/registry/default/ui/badge'
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/lib/registry/default/ui/drawer'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Label } from '@/lib/registry/default/ui/label'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'
|
||||
import { Textarea } from '@/lib/registry/default/ui/textarea'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/registry/default/ui/tooltip'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid h-screen w-full pl-[53px]">
|
||||
<aside class="inset-y fixed left-0 z-20 flex h-full flex-col border-r">
|
||||
<div class="border-b p-2">
|
||||
<Button variant="outline" size="icon" aria-label="Home">
|
||||
<Triangle class="size-5 fill-foreground" />
|
||||
</Button>
|
||||
</div>
|
||||
<nav class="grid gap-1 p-2">
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="rounded-lg bg-muted"
|
||||
aria-label="Playground"
|
||||
>
|
||||
<SquareTerminal class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
Playground
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="rounded-lg"
|
||||
aria-label="Models"
|
||||
>
|
||||
<Bot class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
Models
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="rounded-lg"
|
||||
aria-label="API"
|
||||
>
|
||||
<Code2 class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
API
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="rounded-lg"
|
||||
aria-label="Documentation"
|
||||
>
|
||||
<Book class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
Documentation
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="rounded-lg"
|
||||
aria-label="Settings"
|
||||
>
|
||||
<Settings2 class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
Settings
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</nav>
|
||||
<nav class="mt-auto grid gap-1 p-2">
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="mt-auto rounded-lg"
|
||||
aria-label="Help"
|
||||
>
|
||||
<LifeBuoy class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
Help
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="mt-auto rounded-lg"
|
||||
aria-label="Account"
|
||||
>
|
||||
<SquareUser class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
Account
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="flex flex-col">
|
||||
<header class="sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4">
|
||||
<h1 class="text-xl font-semibold">
|
||||
Playground
|
||||
</h1>
|
||||
<Drawer>
|
||||
<DrawerTrigger as-child>
|
||||
<Button variant="ghost" size="icon" class="md:hidden">
|
||||
<Settings class="size-4" />
|
||||
<span class="sr-only">Settings</span>
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent class="max-h-[80vh]">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>Configuration</DrawerTitle>
|
||||
<DrawerDescription>
|
||||
Configure the settings for the model and messages.
|
||||
</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
<form class="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
|
||||
<fieldset class="grid gap-6 rounded-lg border p-4">
|
||||
<legend class="-ml-1 px-1 text-sm font-medium">
|
||||
Settings
|
||||
</legend>
|
||||
<div class="grid gap-3">
|
||||
<Label for="model">Model</Label>
|
||||
<Select>
|
||||
<SelectTrigger
|
||||
id="model"
|
||||
class="items-start [&_[data-description]]:hidden"
|
||||
>
|
||||
<SelectValue placeholder="Select a model" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="genesis">
|
||||
<div class="flex items-start gap-3 text-muted-foreground">
|
||||
<Rabbit class="size-5" />
|
||||
<div class="grid gap-0.5">
|
||||
<p>
|
||||
Neural
|
||||
<span class="font-medium text-foreground">
|
||||
Genesis
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-xs" data-description>
|
||||
Our fastest model for general use cases.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="explorer">
|
||||
<div class="flex items-start gap-3 text-muted-foreground">
|
||||
<Bird class="size-5" />
|
||||
<div class="grid gap-0.5">
|
||||
<p>
|
||||
Neural
|
||||
<span class="font-medium text-foreground">
|
||||
Explorer
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-xs" data-description>
|
||||
Performance and speed for efficiency.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="quantum">
|
||||
<div class="flex items-start gap-3 text-muted-foreground">
|
||||
<Turtle class="size-5" />
|
||||
<div class="grid gap-0.5">
|
||||
<p>
|
||||
Neural
|
||||
<span class="font-medium text-foreground">
|
||||
Quantum
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-xs" data-description>
|
||||
The most powerful model for complex
|
||||
computations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="temperature">Temperature</Label>
|
||||
<Input id="temperature" type="number" placeholder="0.4" />
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="top-p">Top P</Label>
|
||||
<Input id="top-p" type="number" placeholder="0.7" />
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="top-k">Top K</Label>
|
||||
<Input id="top-k" type="number" placeholder="0.0" />
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="grid gap-6 rounded-lg border p-4">
|
||||
<legend class="-ml-1 px-1 text-sm font-medium">
|
||||
Messages
|
||||
</legend>
|
||||
<div class="grid gap-3">
|
||||
<Label for="role">Role</Label>
|
||||
<Select default-value="system">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="system">
|
||||
System
|
||||
</SelectItem>
|
||||
<SelectItem value="user">
|
||||
User
|
||||
</SelectItem>
|
||||
<SelectItem value="assistant">
|
||||
Assistant
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="content">Content</Label>
|
||||
<Textarea id="content" placeholder="You are a..." />
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="ml-auto gap-1.5 text-sm"
|
||||
>
|
||||
<Share class="size-3.5" />
|
||||
Share
|
||||
</Button>
|
||||
</header>
|
||||
<main class="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="relative hidden flex-col items-start gap-8 md:flex">
|
||||
<form class="grid w-full items-start gap-6">
|
||||
<fieldset class="grid gap-6 rounded-lg border p-4">
|
||||
<legend class="-ml-1 px-1 text-sm font-medium">
|
||||
Settings
|
||||
</legend>
|
||||
<div class="grid gap-3">
|
||||
<Label for="model">Model</Label>
|
||||
<Select>
|
||||
<SelectTrigger
|
||||
id="model"
|
||||
class="items-start [&_[data-description]]:hidden"
|
||||
>
|
||||
<SelectValue placeholder="Select a model" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="genesis">
|
||||
<div class="flex items-start gap-3 text-muted-foreground">
|
||||
<Rabbit class="size-5" />
|
||||
<div class="grid gap-0.5">
|
||||
<p>
|
||||
Neural
|
||||
<span class="font-medium text-foreground">
|
||||
Genesis
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-xs" data-description>
|
||||
Our fastest model for general use cases.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="explorer">
|
||||
<div class="flex items-start gap-3 text-muted-foreground">
|
||||
<Bird class="size-5" />
|
||||
<div class="grid gap-0.5">
|
||||
<p>
|
||||
Neural
|
||||
<span class="font-medium text-foreground">
|
||||
Explorer
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-xs" data-description>
|
||||
Performance and speed for efficiency.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="quantum">
|
||||
<div class="flex items-start gap-3 text-muted-foreground">
|
||||
<Turtle class="size-5" />
|
||||
<div class="grid gap-0.5">
|
||||
<p>
|
||||
Neural
|
||||
<span class="font-medium text-foreground">
|
||||
Quantum
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-xs" data-description>
|
||||
The most powerful model for complex computations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="temperature">Temperature</Label>
|
||||
<Input id="temperature" type="number" placeholder="0.4" />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="grid gap-3">
|
||||
<Label for="top-p">Top P</Label>
|
||||
<Input id="top-p" type="number" placeholder="0.7" />
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="top-k">Top K</Label>
|
||||
<Input id="top-k" type="number" placeholder="0.0" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="grid gap-6 rounded-lg border p-4">
|
||||
<legend class="-ml-1 px-1 text-sm font-medium">
|
||||
Messages
|
||||
</legend>
|
||||
<div class="grid gap-3">
|
||||
<Label for="role">Role</Label>
|
||||
<Select default-value="system">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="system">
|
||||
System
|
||||
</SelectItem>
|
||||
<SelectItem value="user">
|
||||
User
|
||||
</SelectItem>
|
||||
<SelectItem value="assistant">
|
||||
Assistant
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="content">Content</Label>
|
||||
<Textarea
|
||||
id="content"
|
||||
placeholder="You are a..."
|
||||
class="min-h-[9.5rem]"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
|
||||
<Badge variant="outline" class="absolute right-3 top-3">
|
||||
Output
|
||||
</Badge>
|
||||
<div class="flex-1" />
|
||||
<form class="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring">
|
||||
<Label for="message" class="sr-only">
|
||||
Message
|
||||
</Label>
|
||||
<Textarea
|
||||
id="message"
|
||||
placeholder="Type your message here..."
|
||||
class="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
|
||||
/>
|
||||
<div class="flex items-center p-3 pt-0">
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Paperclip class="size-4" />
|
||||
<span class="sr-only">Attach file</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">
|
||||
Attach File
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Mic class="size-4" />
|
||||
<span class="sr-only">Use Microphone</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">
|
||||
Use Microphone
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Button type="submit" size="sm" class="ml-auto gap-1.5">
|
||||
Send Message
|
||||
<CornerDownLeft class="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
216
apps/www/src/lib/registry/default/block/Dashboard04.vue
Normal file
216
apps/www/src/lib/registry/default/block/Dashboard04.vue
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
<script lang="ts">
|
||||
export const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'
|
||||
export const iframeHeight = '780px'
|
||||
export const containerClass = 'w-full h-full'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'
|
||||
|
||||
import { Button } from '@/lib/registry/default/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
|
||||
import { Checkbox } from '@/lib/registry/default/ui/checkbox'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
|
||||
import { Input } from '@/lib/registry/default/ui/input'
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex min-h-screen w-full flex-col">
|
||||
<header class="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
|
||||
<nav class="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-2 text-lg font-semibold md:text-base"
|
||||
>
|
||||
<Package2 class="h-6 w-6" />
|
||||
<span class="sr-only">Acme Inc</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Orders
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Customers
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
<Sheet>
|
||||
<SheetTrigger as-child>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
class="shrink-0 md:hidden"
|
||||
>
|
||||
<Menu class="h-5 w-5" />
|
||||
<span class="sr-only">Toggle navigation menu</span>
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left">
|
||||
<nav class="grid gap-6 text-lg font-medium">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-2 text-lg font-semibold"
|
||||
>
|
||||
<Package2 class="h-6 w-6" />
|
||||
<span class="sr-only">Acme Inc</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Orders
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Customers
|
||||
</a>
|
||||
<a href="#" class="hover:text-foreground">
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<div class="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
|
||||
<form class="ml-auto flex-1 sm:flex-initial">
|
||||
<div class="relative">
|
||||
<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search products..."
|
||||
class="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="secondary" size="icon" class="rounded-full">
|
||||
<CircleUser class="h-5 w-5" />
|
||||
<span class="sr-only">Toggle user menu</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Support</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Logout</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
|
||||
<div class="mx-auto grid w-full max-w-6xl gap-2">
|
||||
<h1 class="text-3xl font-semibold">
|
||||
Settings
|
||||
</h1>
|
||||
</div>
|
||||
<div class="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
|
||||
<nav class="grid gap-4 text-sm text-muted-foreground">
|
||||
<a href="#" class="font-semibold text-primary">
|
||||
General
|
||||
</a>
|
||||
<a href="#">
|
||||
Security
|
||||
</a>
|
||||
<a href="#">
|
||||
Integrations
|
||||
</a>
|
||||
<a href="#">
|
||||
Support
|
||||
</a>
|
||||
<a href="#">
|
||||
Organizations
|
||||
</a>
|
||||
<a href="#">
|
||||
Advanced
|
||||
</a>
|
||||
</nav>
|
||||
<div class="grid gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Store Name</CardTitle>
|
||||
<CardDescription>
|
||||
Used to identify your store in the marketplace.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form>
|
||||
<Input placeholder="Store Name" />
|
||||
</form>
|
||||
</CardContent>
|
||||
<CardFooter class="border-t px-6 py-4">
|
||||
<Button>Save</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Plugins Directory</CardTitle>
|
||||
<CardDescription>
|
||||
The directory within your project, in which your plugins are
|
||||
located.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form class="flex flex-col gap-4">
|
||||
<Input
|
||||
placeholder="Project Name"
|
||||
default-value="/content/plugins"
|
||||
/>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox id="include" default-checked />
|
||||
<label
|
||||
for="include"
|
||||
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Allow administrators to change the directory.
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
<CardFooter class="border-t px-6 py-4">
|
||||
<Button>Save</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<script lang="ts">
|
||||
export const description
|
||||
= 'A simple login form with email and password. The submit button says \'Sign in\'.'
|
||||
export const iframeHeight = '600px'
|
||||
export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="w-full max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-2xl">
|
||||
Login
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your email below to login to your account.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email</Label>
|
||||
<Input id="email" type="email" placeholder="m@example.com" required />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="password">Password</Label>
|
||||
<Input id="password" type="password" required />
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button class="w-full">
|
||||
Sign in
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<script lang="ts">
|
||||
export const description
|
||||
= 'A login form with email and password. There\'s an option to login with Google and a link to sign up if you don\'t have an account.'
|
||||
export const iframeHeight = '600px'
|
||||
export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="mx-auto max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-2xl">
|
||||
Login
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your email below to login to your account
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="grid gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="m@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<div class="flex items-center">
|
||||
<Label for="password">Password</Label>
|
||||
<a href="#" class="ml-auto inline-block text-sm underline">
|
||||
Forgot your password?
|
||||
</a>
|
||||
</div>
|
||||
<Input id="password" type="password" required />
|
||||
</div>
|
||||
<Button type="submit" class="w-full">
|
||||
Login
|
||||
</Button>
|
||||
<Button variant="outline" class="w-full">
|
||||
Login with Google
|
||||
</Button>
|
||||
</div>
|
||||
<div class="mt-4 text-center text-sm">
|
||||
Don't have an account?
|
||||
<a href="#" class="underline">
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<script lang="ts">
|
||||
export const description
|
||||
= 'A sign up form with first name, last name, email and password inside a card. There\'s an option to sign up with GitHub and a link to login if you already have an account'
|
||||
export const iframeHeight = '600px'
|
||||
export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="mx-auto max-w-sm">
|
||||
<CardHeader>
|
||||
<CardTitle class="text-xl">
|
||||
Sign Up
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your information to create an account
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="grid gap-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="first-name">First name</Label>
|
||||
<Input id="first-name" placeholder="Max" required />
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="last-name">Last name</Label>
|
||||
<Input id="last-name" placeholder="Robinson" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="m@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="password">Password</Label>
|
||||
<Input id="password" type="password" />
|
||||
</div>
|
||||
<Button type="submit" class="w-full">
|
||||
Create an account
|
||||
</Button>
|
||||
<Button variant="outline" class="w-full">
|
||||
Sign up with GitHub
|
||||
</Button>
|
||||
</div>
|
||||
<div class="mt-4 text-center text-sm">
|
||||
Already have an account?
|
||||
<a href="#" class="underline">
|
||||
Sign in
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<script lang="ts">
|
||||
export const description
|
||||
= 'A login page with two columns. The first column has the login form with email and password. There\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'
|
||||
export const iframeHeight = '800px'
|
||||
export const containerClass = 'w-full h-full p-4 lg:p-0'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
|
||||
<div class="flex items-center justify-center py-12">
|
||||
<div class="mx-auto grid w-[350px] gap-6">
|
||||
<div class="grid gap-2 text-center">
|
||||
<h1 class="text-3xl font-bold">
|
||||
Login
|
||||
</h1>
|
||||
<p class="text-balance text-muted-foreground">
|
||||
Enter your email below to login to your account
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<div class="grid gap-2">
|
||||
<Label for="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="m@example.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<div class="flex items-center">
|
||||
<Label for="password">Password</Label>
|
||||
<a
|
||||
href="/forgot-password"
|
||||
class="ml-auto inline-block text-sm underline"
|
||||
>
|
||||
Forgot your password?
|
||||
</a>
|
||||
</div>
|
||||
<Input id="password" type="password" required />
|
||||
</div>
|
||||
<Button type="submit" class="w-full">
|
||||
Login
|
||||
</Button>
|
||||
<Button variant="outline" class="w-full">
|
||||
Login with Google
|
||||
</Button>
|
||||
</div>
|
||||
<div class="mt-4 text-center text-sm">
|
||||
Don't have an account?
|
||||
<a href="#" class="underline">
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden bg-muted lg:block">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="Image"
|
||||
width="1920"
|
||||
height="1080"
|
||||
class="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
462
apps/www/src/lib/registry/new-york/block/Dashboard01.vue
Normal file
462
apps/www/src/lib/registry/new-york/block/Dashboard01.vue
Normal file
|
|
@ -0,0 +1,462 @@
|
|||
<script lang="ts">
|
||||
export const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'
|
||||
export const iframeHeight = '825px'
|
||||
export const containerClass = 'w-full h-full'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/new-york/ui/avatar'
|
||||
import { Badge } from '@/lib/registry/new-york/ui/badge'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/lib/registry/new-york/ui/table'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex min-h-screen w-full flex-col">
|
||||
<header class="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
|
||||
<nav class="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-2 text-lg font-semibold md:text-base"
|
||||
>
|
||||
<Package2 class="h-6 w-6" />
|
||||
<span class="sr-only">Acme Inc</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Orders
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Customers
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Analytics
|
||||
</a>
|
||||
</nav>
|
||||
<Sheet>
|
||||
<SheetTrigger as-child>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
class="shrink-0 md:hidden"
|
||||
>
|
||||
<Menu class="h-5 w-5" />
|
||||
<span class="sr-only">Toggle navigation menu</span>
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left">
|
||||
<nav class="grid gap-6 text-lg font-medium">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-2 text-lg font-semibold"
|
||||
>
|
||||
<Package2 class="h-6 w-6" />
|
||||
<span class="sr-only">Acme Inc</span>
|
||||
</a>
|
||||
<a href="#" class="hover:text-foreground">
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Orders
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Customers
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Analytics
|
||||
</a>
|
||||
</nav>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<div class="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
|
||||
<form class="ml-auto flex-1 sm:flex-initial">
|
||||
<div class="relative">
|
||||
<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search products..."
|
||||
class="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="secondary" size="icon" class="rounded-full">
|
||||
<CircleUser class="h-5 w-5" />
|
||||
<span class="sr-only">Toggle user menu</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Support</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Logout</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
|
||||
<div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-sm font-medium">
|
||||
Total Revenue
|
||||
</CardTitle>
|
||||
<DollarSign class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
$45,231.89
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
+20.1% from last month
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-sm font-medium">
|
||||
Subscriptions
|
||||
</CardTitle>
|
||||
<Users class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
+2350
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
+180.1% from last month
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-sm font-medium">
|
||||
Sales
|
||||
</CardTitle>
|
||||
<CreditCard class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
+12,234
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
+19% from last month
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle class="text-sm font-medium">
|
||||
Active Now
|
||||
</CardTitle>
|
||||
<Activity class="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div class="text-2xl font-bold">
|
||||
+573
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
+201 since last hour
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
|
||||
<Card class="xl:col-span-2">
|
||||
<CardHeader class="flex flex-row items-center">
|
||||
<div class="grid gap-2">
|
||||
<CardTitle>Transactions</CardTitle>
|
||||
<CardDescription>
|
||||
Recent transactions from your store.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button as-child size="sm" class="ml-auto gap-1">
|
||||
<a href="#">
|
||||
View All
|
||||
<ArrowUpRight class="h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Customer</TableHead>
|
||||
<TableHead class="hidden xl:table-column">
|
||||
Type
|
||||
</TableHead>
|
||||
<TableHead class="hidden xl:table-column">
|
||||
Status
|
||||
</TableHead>
|
||||
<TableHead class="hidden xl:table-column">
|
||||
Date
|
||||
</TableHead>
|
||||
<TableHead class="text-right">
|
||||
Amount
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<div class="font-medium">
|
||||
Liam Johnson
|
||||
</div>
|
||||
<div class="hidden text-sm text-muted-foreground md:inline">
|
||||
liam@example.com
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
Sale
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
<Badge class="text-xs" variant="outline">
|
||||
Approved
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell class="hidden md:table-cell lg:hidden xl:table-column">
|
||||
2023-06-23
|
||||
</TableCell>
|
||||
<TableCell class="text-right">
|
||||
$250.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<div class="font-medium">
|
||||
Olivia Smith
|
||||
</div>
|
||||
<div class="hidden text-sm text-muted-foreground md:inline">
|
||||
olivia@example.com
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
Refund
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
<Badge class="text-xs" variant="outline">
|
||||
Declined
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell class="hidden md:table-cell lg:hidden xl:table-column">
|
||||
2023-06-24
|
||||
</TableCell>
|
||||
<TableCell class="text-right">
|
||||
$150.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<div class="font-medium">
|
||||
Noah Williams
|
||||
</div>
|
||||
<div class="hidden text-sm text-muted-foreground md:inline">
|
||||
noah@example.com
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
Subscription
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
<Badge class="text-xs" variant="outline">
|
||||
Approved
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell class="hidden md:table-cell lg:hidden xl:table-column">
|
||||
2023-06-25
|
||||
</TableCell>
|
||||
<TableCell class="text-right">
|
||||
$350.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<div class="font-medium">
|
||||
Emma Brown
|
||||
</div>
|
||||
<div class="hidden text-sm text-muted-foreground md:inline">
|
||||
emma@example.com
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
Sale
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
<Badge class="text-xs" variant="outline">
|
||||
Approved
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell class="hidden md:table-cell lg:hidden xl:table-column">
|
||||
2023-06-26
|
||||
</TableCell>
|
||||
<TableCell class="text-right">
|
||||
$450.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>
|
||||
<div class="font-medium">
|
||||
Liam Johnson
|
||||
</div>
|
||||
<div class="hidden text-sm text-muted-foreground md:inline">
|
||||
liam@example.com
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
Sale
|
||||
</TableCell>
|
||||
<TableCell class="hidden xl:table-column">
|
||||
<Badge class="text-xs" variant="outline">
|
||||
Approved
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell class="hidden md:table-cell lg:hidden xl:table-column">
|
||||
2023-06-27
|
||||
</TableCell>
|
||||
<TableCell class="text-right">
|
||||
$550.00
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Sales</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent class="grid gap-8">
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar class="hidden h-9 w-9 sm:flex">
|
||||
<AvatarImage src="/avatars/01.png" alt="Avatar" />
|
||||
<AvatarFallback>OM</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid gap-1">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Olivia Martin
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
olivia.martin@email.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-auto font-medium">
|
||||
+$1,999.00
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar class="hidden h-9 w-9 sm:flex">
|
||||
<AvatarImage src="/avatars/02.png" alt="Avatar" />
|
||||
<AvatarFallback>JL</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid gap-1">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Jackson Lee
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
jackson.lee@email.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-auto font-medium">
|
||||
+$39.00
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar class="hidden h-9 w-9 sm:flex">
|
||||
<AvatarImage src="/avatars/03.png" alt="Avatar" />
|
||||
<AvatarFallback>IN</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid gap-1">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Isabella Nguyen
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
isabella.nguyen@email.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-auto font-medium">
|
||||
+$299.00
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar class="hidden h-9 w-9 sm:flex">
|
||||
<AvatarImage src="/avatars/04.png" alt="Avatar" />
|
||||
<AvatarFallback>WK</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid gap-1">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
William Kim
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
will@email.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-auto font-medium">
|
||||
+$99.00
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<Avatar class="hidden h-9 w-9 sm:flex">
|
||||
<AvatarImage src="/avatars/05.png" alt="Avatar" />
|
||||
<AvatarFallback>SD</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid gap-1">
|
||||
<p class="text-sm font-medium leading-none">
|
||||
Sofia Davis
|
||||
</p>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
sofia.davis@email.com
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-auto font-medium">
|
||||
+$39.00
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
222
apps/www/src/lib/registry/new-york/block/Dashboard02.vue
Normal file
222
apps/www/src/lib/registry/new-york/block/Dashboard02.vue
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
<script lang="ts">
|
||||
export const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'
|
||||
export const iframeHeight = '800px'
|
||||
export const containerClass = 'w-full h-full'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'
|
||||
|
||||
import { Badge } from '@/lib/registry/new-york/ui/badge'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
|
||||
<div class="hidden border-r bg-muted/40 md:block">
|
||||
<div class="flex h-full max-h-screen flex-col gap-2">
|
||||
<div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
|
||||
<a href="/" class="flex items-center gap-2 font-semibold">
|
||||
<Package2 class="h-6 w-6" />
|
||||
<span class="">Acme Inc</span>
|
||||
</a>
|
||||
<Button variant="outline" size="icon" class="ml-auto h-8 w-8">
|
||||
<Bell class="h-4 w-4" />
|
||||
<span class="sr-only">Toggle notifications</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<nav class="grid items-start px-2 text-sm font-medium lg:px-4">
|
||||
<a
|
||||
href="/"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
|
||||
>
|
||||
<Home class="h-4 w-4" />
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
|
||||
>
|
||||
<ShoppingCart class="h-4 w-4" />
|
||||
Orders
|
||||
<Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
|
||||
6
|
||||
</Badge>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary"
|
||||
>
|
||||
<Package class="h-4 w-4" />
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
|
||||
>
|
||||
<Users class="h-4 w-4" />
|
||||
Customers
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary"
|
||||
>
|
||||
<LineChart class="h-4 w-4" />
|
||||
Analytics
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="mt-auto p-4">
|
||||
<Card>
|
||||
<CardHeader class="p-2 pt-0 md:p-4">
|
||||
<CardTitle>Upgrade to Pro</CardTitle>
|
||||
<CardDescription>
|
||||
Unlock all features and get unlimited access to our support
|
||||
team.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent class="p-2 pt-0 md:p-4 md:pt-0">
|
||||
<Button size="sm" class="w-full">
|
||||
Upgrade
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<header class="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
|
||||
<Sheet>
|
||||
<SheetTrigger as-child>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
class="shrink-0 md:hidden"
|
||||
>
|
||||
<Menu class="h-5 w-5" />
|
||||
<span class="sr-only">Toggle navigation menu</span>
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left" class="flex flex-col">
|
||||
<nav class="grid gap-2 text-lg font-medium">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-2 text-lg font-semibold"
|
||||
>
|
||||
<Package2 class="h-6 w-6" />
|
||||
<span class="sr-only">Acme Inc</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Home class="h-5 w-5" />
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
|
||||
>
|
||||
<ShoppingCart class="h-5 w-5" />
|
||||
Orders
|
||||
<Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
|
||||
6
|
||||
</Badge>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Package class="h-5 w-5" />
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Users class="h-5 w-5" />
|
||||
Customers
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<LineChart class="h-5 w-5" />
|
||||
Analytics
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Upgrade to Pro</CardTitle>
|
||||
<CardDescription>
|
||||
Unlock all features and get unlimited access to our
|
||||
support team.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button size="sm" class="w-full">
|
||||
Upgrade
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<div class="w-full flex-1">
|
||||
<form>
|
||||
<div class="relative">
|
||||
<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search products..."
|
||||
class="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="secondary" size="icon" class="rounded-full">
|
||||
<CircleUser class="h-5 w-5" />
|
||||
<span class="sr-only">Toggle user menu</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Support</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Logout</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</header>
|
||||
<main class="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
|
||||
<div class="flex items-center">
|
||||
<h1 class="text-lg font-semibold md:text-2xl">
|
||||
Inventory
|
||||
</h1>
|
||||
</div>
|
||||
<div class="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
|
||||
<div class="flex flex-col items-center gap-1 text-center">
|
||||
<h3 class="text-2xl font-bold tracking-tight">
|
||||
You have no products
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
You can start selling as soon as you add a product.
|
||||
</p>
|
||||
<Button class="mt-4">
|
||||
Add Product
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
441
apps/www/src/lib/registry/new-york/block/Dashboard03.vue
Normal file
441
apps/www/src/lib/registry/new-york/block/Dashboard03.vue
Normal file
|
|
@ -0,0 +1,441 @@
|
|||
<script lang="ts">
|
||||
export const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'
|
||||
export const iframeHeight = '740px'
|
||||
export const containerClass = 'w-full h-full'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'
|
||||
|
||||
import { Badge } from '@/lib/registry/new-york/ui/badge'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/lib/registry/new-york/ui/drawer'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'
|
||||
import { Textarea } from '@/lib/registry/new-york/ui/textarea'
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/registry/new-york/ui/tooltip'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid h-screen w-full pl-[53px]">
|
||||
<aside class="inset-y fixed left-0 z-20 flex h-full flex-col border-r">
|
||||
<div class="border-b p-2">
|
||||
<Button variant="outline" size="icon" aria-label="Home">
|
||||
<Triangle class="size-5 fill-foreground" />
|
||||
</Button>
|
||||
</div>
|
||||
<nav class="grid gap-1 p-2">
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="rounded-lg bg-muted"
|
||||
aria-label="Playground"
|
||||
>
|
||||
<SquareTerminal class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
Playground
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="rounded-lg"
|
||||
aria-label="Models"
|
||||
>
|
||||
<Bot class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
Models
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="rounded-lg"
|
||||
aria-label="API"
|
||||
>
|
||||
<Code2 class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
API
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="rounded-lg"
|
||||
aria-label="Documentation"
|
||||
>
|
||||
<Book class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
Documentation
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="rounded-lg"
|
||||
aria-label="Settings"
|
||||
>
|
||||
<Settings2 class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
Settings
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</nav>
|
||||
<nav class="mt-auto grid gap-1 p-2">
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="mt-auto rounded-lg"
|
||||
aria-label="Help"
|
||||
>
|
||||
<LifeBuoy class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
Help
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
class="mt-auto rounded-lg"
|
||||
aria-label="Account"
|
||||
>
|
||||
<SquareUser class="size-5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" :side-offset="5">
|
||||
Account
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="flex flex-col">
|
||||
<header class="sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4">
|
||||
<h1 class="text-xl font-semibold">
|
||||
Playground
|
||||
</h1>
|
||||
<Drawer>
|
||||
<DrawerTrigger as-child>
|
||||
<Button variant="ghost" size="icon" class="md:hidden">
|
||||
<Settings class="size-4" />
|
||||
<span class="sr-only">Settings</span>
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent class="max-h-[80vh]">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>Configuration</DrawerTitle>
|
||||
<DrawerDescription>
|
||||
Configure the settings for the model and messages.
|
||||
</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
<form class="grid w-full items-start gap-6 overflow-auto p-4 pt-0">
|
||||
<fieldset class="grid gap-6 rounded-lg border p-4">
|
||||
<legend class="-ml-1 px-1 text-sm font-medium">
|
||||
Settings
|
||||
</legend>
|
||||
<div class="grid gap-3">
|
||||
<Label for="model">Model</Label>
|
||||
<Select>
|
||||
<SelectTrigger
|
||||
id="model"
|
||||
class="items-start [&_[data-description]]:hidden"
|
||||
>
|
||||
<SelectValue placeholder="Select a model" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="genesis">
|
||||
<div class="flex items-start gap-3 text-muted-foreground">
|
||||
<Rabbit class="size-5" />
|
||||
<div class="grid gap-0.5">
|
||||
<p>
|
||||
Neural
|
||||
<span class="font-medium text-foreground">
|
||||
Genesis
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-xs" data-description>
|
||||
Our fastest model for general use cases.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="explorer">
|
||||
<div class="flex items-start gap-3 text-muted-foreground">
|
||||
<Bird class="size-5" />
|
||||
<div class="grid gap-0.5">
|
||||
<p>
|
||||
Neural
|
||||
<span class="font-medium text-foreground">
|
||||
Explorer
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-xs" data-description>
|
||||
Performance and speed for efficiency.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="quantum">
|
||||
<div class="flex items-start gap-3 text-muted-foreground">
|
||||
<Turtle class="size-5" />
|
||||
<div class="grid gap-0.5">
|
||||
<p>
|
||||
Neural
|
||||
<span class="font-medium text-foreground">
|
||||
Quantum
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-xs" data-description>
|
||||
The most powerful model for complex
|
||||
computations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="temperature">Temperature</Label>
|
||||
<Input id="temperature" type="number" placeholder="0.4" />
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="top-p">Top P</Label>
|
||||
<Input id="top-p" type="number" placeholder="0.7" />
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="top-k">Top K</Label>
|
||||
<Input id="top-k" type="number" placeholder="0.0" />
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="grid gap-6 rounded-lg border p-4">
|
||||
<legend class="-ml-1 px-1 text-sm font-medium">
|
||||
Messages
|
||||
</legend>
|
||||
<div class="grid gap-3">
|
||||
<Label for="role">Role</Label>
|
||||
<Select default-value="system">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="system">
|
||||
System
|
||||
</SelectItem>
|
||||
<SelectItem value="user">
|
||||
User
|
||||
</SelectItem>
|
||||
<SelectItem value="assistant">
|
||||
Assistant
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="content">Content</Label>
|
||||
<Textarea id="content" placeholder="You are a..." />
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="ml-auto gap-1.5 text-sm"
|
||||
>
|
||||
<Share class="size-3.5" />
|
||||
Share
|
||||
</Button>
|
||||
</header>
|
||||
<main class="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="relative hidden flex-col items-start gap-8 md:flex">
|
||||
<form class="grid w-full items-start gap-6">
|
||||
<fieldset class="grid gap-6 rounded-lg border p-4">
|
||||
<legend class="-ml-1 px-1 text-sm font-medium">
|
||||
Settings
|
||||
</legend>
|
||||
<div class="grid gap-3">
|
||||
<Label for="model">Model</Label>
|
||||
<Select>
|
||||
<SelectTrigger
|
||||
id="model"
|
||||
class="items-start [&_[data-description]]:hidden"
|
||||
>
|
||||
<SelectValue placeholder="Select a model" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="genesis">
|
||||
<div class="flex items-start gap-3 text-muted-foreground">
|
||||
<Rabbit class="size-5" />
|
||||
<div class="grid gap-0.5">
|
||||
<p>
|
||||
Neural
|
||||
<span class="font-medium text-foreground">
|
||||
Genesis
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-xs" data-description>
|
||||
Our fastest model for general use cases.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="explorer">
|
||||
<div class="flex items-start gap-3 text-muted-foreground">
|
||||
<Bird class="size-5" />
|
||||
<div class="grid gap-0.5">
|
||||
<p>
|
||||
Neural
|
||||
<span class="font-medium text-foreground">
|
||||
Explorer
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-xs" data-description>
|
||||
Performance and speed for efficiency.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="quantum">
|
||||
<div class="flex items-start gap-3 text-muted-foreground">
|
||||
<Turtle class="size-5" />
|
||||
<div class="grid gap-0.5">
|
||||
<p>
|
||||
Neural
|
||||
<span class="font-medium text-foreground">
|
||||
Quantum
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-xs" data-description>
|
||||
The most powerful model for complex computations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="temperature">Temperature</Label>
|
||||
<Input id="temperature" type="number" placeholder="0.4" />
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="grid gap-3">
|
||||
<Label for="top-p">Top P</Label>
|
||||
<Input id="top-p" type="number" placeholder="0.7" />
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="top-k">Top K</Label>
|
||||
<Input id="top-k" type="number" placeholder="0.0" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="grid gap-6 rounded-lg border p-4">
|
||||
<legend class="-ml-1 px-1 text-sm font-medium">
|
||||
Messages
|
||||
</legend>
|
||||
<div class="grid gap-3">
|
||||
<Label for="role">Role</Label>
|
||||
<Select default-value="system">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select a role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="system">
|
||||
System
|
||||
</SelectItem>
|
||||
<SelectItem value="user">
|
||||
User
|
||||
</SelectItem>
|
||||
<SelectItem value="assistant">
|
||||
Assistant
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="grid gap-3">
|
||||
<Label for="content">Content</Label>
|
||||
<Textarea
|
||||
id="content"
|
||||
placeholder="You are a..."
|
||||
class="min-h-[9.5rem]"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
|
||||
<Badge variant="outline" class="absolute right-3 top-3">
|
||||
Output
|
||||
</Badge>
|
||||
<div class="flex-1" />
|
||||
<form class="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring">
|
||||
<Label for="message" class="sr-only">
|
||||
Message
|
||||
</Label>
|
||||
<Textarea
|
||||
id="message"
|
||||
placeholder="Type your message here..."
|
||||
class="min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0"
|
||||
/>
|
||||
<div class="flex items-center p-3 pt-0">
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Paperclip class="size-4" />
|
||||
<span class="sr-only">Attach file</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">
|
||||
Attach File
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger as-child>
|
||||
<Button variant="ghost" size="icon">
|
||||
<Mic class="size-4" />
|
||||
<span class="sr-only">Use Microphone</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">
|
||||
Use Microphone
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Button type="submit" size="sm" class="ml-auto gap-1.5">
|
||||
Send Message
|
||||
<CornerDownLeft class="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
216
apps/www/src/lib/registry/new-york/block/Dashboard04.vue
Normal file
216
apps/www/src/lib/registry/new-york/block/Dashboard04.vue
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
<script lang="ts">
|
||||
export const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'
|
||||
export const iframeHeight = '780px'
|
||||
export const containerClass = 'w-full h-full'
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'
|
||||
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
|
||||
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex min-h-screen w-full flex-col">
|
||||
<header class="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
|
||||
<nav class="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-2 text-lg font-semibold md:text-base"
|
||||
>
|
||||
<Package2 class="h-6 w-6" />
|
||||
<span class="sr-only">Acme Inc</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Orders
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Customers
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
<Sheet>
|
||||
<SheetTrigger as-child>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
class="shrink-0 md:hidden"
|
||||
>
|
||||
<Menu class="h-5 w-5" />
|
||||
<span class="sr-only">Toggle navigation menu</span>
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="left">
|
||||
<nav class="grid gap-6 text-lg font-medium">
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center gap-2 text-lg font-semibold"
|
||||
>
|
||||
<Package2 class="h-6 w-6" />
|
||||
<span class="sr-only">Acme Inc</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Orders
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Products
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Customers
|
||||
</a>
|
||||
<a href="#" class="hover:text-foreground">
|
||||
Settings
|
||||
</a>
|
||||
</nav>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<div class="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
|
||||
<form class="ml-auto flex-1 sm:flex-initial">
|
||||
<div class="relative">
|
||||
<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search products..."
|
||||
class="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button variant="secondary" size="icon" class="rounded-full">
|
||||
<CircleUser class="h-5 w-5" />
|
||||
<span class="sr-only">Toggle user menu</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Support</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Logout</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
|
||||
<div class="mx-auto grid w-full max-w-6xl gap-2">
|
||||
<h1 class="text-3xl font-semibold">
|
||||
Settings
|
||||
</h1>
|
||||
</div>
|
||||
<div class="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
|
||||
<nav class="grid gap-4 text-sm text-muted-foreground">
|
||||
<a href="#" class="font-semibold text-primary">
|
||||
General
|
||||
</a>
|
||||
<a href="#">
|
||||
Security
|
||||
</a>
|
||||
<a href="#">
|
||||
Integrations
|
||||
</a>
|
||||
<a href="#">
|
||||
Support
|
||||
</a>
|
||||
<a href="#">
|
||||
Organizations
|
||||
</a>
|
||||
<a href="#">
|
||||
Advanced
|
||||
</a>
|
||||
</nav>
|
||||
<div class="grid gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Store Name</CardTitle>
|
||||
<CardDescription>
|
||||
Used to identify your store in the marketplace.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form>
|
||||
<Input placeholder="Store Name" />
|
||||
</form>
|
||||
</CardContent>
|
||||
<CardFooter class="border-t px-6 py-4">
|
||||
<Button>Save</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Plugins Directory</CardTitle>
|
||||
<CardDescription>
|
||||
The directory within your project, in which your plugins are
|
||||
located.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form class="flex flex-col gap-4">
|
||||
<Input
|
||||
placeholder="Project Name"
|
||||
default-value="/content/plugins"
|
||||
/>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox id="include" default-checked />
|
||||
<label
|
||||
for="include"
|
||||
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Allow administrators to change the directory.
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
<CardFooter class="border-t px-6 py-4">
|
||||
<Button>Save</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -27,9 +27,12 @@ export async function buildRegistry() {
|
|||
const uiRegistry = await crawlUI(ui_path)
|
||||
|
||||
const example_path = resolve('./src/lib/registry/default/example')
|
||||
const exampleRegistry = await crawlExample(example_path)
|
||||
const exampleRegistry = await crawlDirectory(example_path, 'example')
|
||||
|
||||
return uiRegistry.concat(exampleRegistry)
|
||||
const block_path = resolve('./src/lib/registry/default/block')
|
||||
const blockRegistry = await crawlDirectory(block_path, 'block')
|
||||
|
||||
return uiRegistry.concat(exampleRegistry).concat(blockRegistry)
|
||||
}
|
||||
|
||||
async function crawlUI(rootPath: string) {
|
||||
|
|
@ -53,15 +56,15 @@ async function crawlUI(rootPath: string) {
|
|||
return uiRegistry
|
||||
}
|
||||
|
||||
async function crawlExample(rootPath: string) {
|
||||
const type = 'components:example'
|
||||
async function crawlDirectory(rootPath: string, typeName: 'example' | 'block') {
|
||||
const type = `components:${typeName}` as const
|
||||
|
||||
const dir = await readdir(rootPath, {
|
||||
recursive: true,
|
||||
withFileTypes: true,
|
||||
})
|
||||
|
||||
const exampleRegistry: Registry = []
|
||||
const registry: Registry = []
|
||||
|
||||
for (const dirent of dir) {
|
||||
if (dirent.name === 'index.ts')
|
||||
|
|
@ -69,11 +72,11 @@ async function crawlExample(rootPath: string) {
|
|||
|
||||
if (dirent.isFile()) {
|
||||
const [name] = dirent.name.split('.vue')
|
||||
const file_path = join('example', normalize(dirent.path).split('/example')[1], dirent.name)
|
||||
const file_path = join(typeName, normalize(dirent.path).split(`/${typeName}`)[1], dirent.name)
|
||||
const { dependencies, registryDependencies }
|
||||
= await getDependencies(join(dirent.path, dirent.name))
|
||||
|
||||
exampleRegistry.push({
|
||||
registry.push({
|
||||
name,
|
||||
type,
|
||||
files: [file_path],
|
||||
|
|
@ -87,14 +90,14 @@ async function crawlExample(rootPath: string) {
|
|||
// if (dirent.isDirectory()) {
|
||||
// const componentPath = resolve(rootPath, dirent.name);
|
||||
// const ui = await buildUIRegistry(componentPath, dirent.name);
|
||||
// exampleRegistry.push({
|
||||
// registry.push({
|
||||
// ...ui,
|
||||
// type
|
||||
// });
|
||||
// }
|
||||
}
|
||||
|
||||
return exampleRegistry
|
||||
return registry
|
||||
}
|
||||
|
||||
async function buildUIRegistry(componentPath: string, componentName: string) {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ export const registrySchema = z.array(
|
|||
'components:ui',
|
||||
'components:component',
|
||||
'components:example',
|
||||
'components:block',
|
||||
]),
|
||||
}),
|
||||
)
|
||||
|
|
|
|||
1
apps/www/src/public/placeholder.svg
Normal file
1
apps/www/src/public/placeholder.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
Loading…
Reference in New Issue
Block a user