feat: adding chart pages
This commit is contained in:
Saeid Zareie
parent
edad815fd9
commit
cf97277284
23
apps/www/.vitepress/theme/components/charts/ChartDisplay.vue
Normal file
23
apps/www/.vitepress/theme/components/charts/ChartDisplay.vue
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script lang="ts" setup>
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
name: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="cn(
|
||||
'group relative flex flex-col overflow-hidden rounded-xl border shadow transition-all duration-200 ease-in-out hover:z-30',
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
<ChartToolbar class="relative z-20 flex justify-end border-b bg-card px-3 py-2.5 text-card-foreground" />
|
||||
<div class="relative z-10 [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
327
apps/www/.vitepress/theme/components/charts/Charts.vue
Normal file
327
apps/www/.vitepress/theme/components/charts/Charts.vue
Normal file
|
|
@ -0,0 +1,327 @@
|
|||
<script lang="ts" setup>
|
||||
import ChartsLayout from '../../layout/ChartsLayout.vue'
|
||||
import ChartDisplay from './ChartDisplay.vue'
|
||||
import { Separator } from '@/lib/registry/new-york/ui/separator'
|
||||
import ChartAreaStacked from '@/lib/registry/new-york/block/ChartAreaStacked.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ChartsLayout>
|
||||
<div class="gap-6 md:flex md:flex-row-reverse md:items-start">
|
||||
<!-- <ChartsThemeSwitcher
|
||||
:themes="chartThemes"
|
||||
class="fixed inset-x-0 bottom-0 z-40 flex bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 lg:sticky lg:bottom-auto lg:top-20"
|
||||
/> -->
|
||||
<div class="grid flex-1 gap-12">
|
||||
<h2 class="sr-only">
|
||||
Examples
|
||||
</h2>
|
||||
<div class="chart-wrapper grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10">
|
||||
<ChartDisplay name="chart-area-stacked">
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-multiple">
|
||||
<!-- <Charts.ChartBarMultiple /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay
|
||||
name="chart-pie-donut-text"
|
||||
class="[&_[data-chart]]:xl:max-h-[243px]"
|
||||
>
|
||||
<!-- <Charts.ChartPieDonutText /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<div class="hidden gap-4 md:grid">
|
||||
<ChartsNav />
|
||||
<Separator />
|
||||
</div>
|
||||
<div
|
||||
id="area-chart"
|
||||
class="chart-wrapper grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-area-default">
|
||||
<!-- <Charts.ChartAreaDefault /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-linear">
|
||||
<!-- <Charts.ChartAreaLinear /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-step">
|
||||
<!-- <Charts.ChartAreaStep /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-stacked">
|
||||
<!-- <Charts.ChartAreaStacked /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-stacked-expand">
|
||||
<!-- <Charts.ChartAreaStackedExpand /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-legend">
|
||||
<!-- <Charts.ChartAreaLegend /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-icons">
|
||||
<!-- <Charts.ChartAreaIcons /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-gradient">
|
||||
<!-- <Charts.ChartAreaGradient /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-area-axes">
|
||||
<!-- <Charts.ChartAreaAxes /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<div class="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-area-interactive">
|
||||
<!-- <Charts.ChartAreaInteractive /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="bar-chart"
|
||||
class="chart-wrapper grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-bar-default">
|
||||
<!-- <Charts.ChartBarDefault /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-horizontal">
|
||||
<!-- <Charts.ChartBarHorizontal /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-multiple">
|
||||
<!-- <Charts.ChartBarMultiple /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-label">
|
||||
<!-- <Charts.ChartBarLabel /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-label-custom">
|
||||
<!-- <Charts.ChartBarLabelCustom /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-mixed">
|
||||
<!-- <Charts.ChartBarMixed /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-stacked">
|
||||
<!-- <Charts.ChartBarStacked /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-active">
|
||||
<!-- <Charts.ChartBarActive /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-bar-negative">
|
||||
<!-- <Charts.ChartBarNegative /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<div class="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-bar-interactive">
|
||||
<!-- <Charts.ChartBarInteractive /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="line-chart"
|
||||
class="chart-wrapper grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-line-default">
|
||||
<!-- <Charts.ChartLineDefault /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-linear">
|
||||
<!-- <Charts.ChartLineLinear /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-step">
|
||||
<!-- <Charts.ChartLineStep /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-multiple">
|
||||
<!-- <Charts.ChartLineMultiple /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots">
|
||||
<!-- <Charts.ChartLineDots /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots-custom">
|
||||
<!-- <Charts.ChartLineDotsCustom /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-dots-colors">
|
||||
<!-- <Charts.ChartLineDotsColors /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-label">
|
||||
<!-- <Charts.ChartLineLabel /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-line-label-custom">
|
||||
<!-- <Charts.ChartLineLabelCustom /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<div class="md:col-span-2 lg:col-span-3">
|
||||
<ChartDisplay name="chart-line-interactive">
|
||||
<!-- <Charts.ChartLineInteractive /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="pie-chart"
|
||||
class="chart-wrapper grid flex-1 scroll-mt-20 items-start gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-pie-simple">
|
||||
<!-- <Charts.ChartPieSimple /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-separator-none">
|
||||
<!-- <Charts.ChartPieSeparatorNone /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label">
|
||||
<!-- <Charts.ChartPieLabel /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label-custom">
|
||||
<!-- <Charts.ChartPieLabelCustom /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-label-list">
|
||||
<!-- <Charts.ChartPieLabelList /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-legend">
|
||||
<!-- <Charts.ChartPieLegend /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut">
|
||||
<!-- <Charts.ChartPieDonut /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut-active">
|
||||
<!-- <Charts.ChartPieDonutActive /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-donut-text">
|
||||
<!-- <Charts.ChartPieDonutText /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-stacked">
|
||||
<!-- <Charts.ChartPieStacked /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-pie-interactive">
|
||||
<!-- <Charts.ChartPieInteractive /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="radar-chart"
|
||||
class="chart-wrapper grid flex-1 scroll-mt-20 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-radar-default">
|
||||
<!-- <Charts.ChartRadarDefault /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-dots">
|
||||
<!-- <Charts.ChartRadarDots /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-multiple">
|
||||
<!-- <Charts.ChartRadarMultiple /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-lines-only">
|
||||
<!-- <Charts.ChartRadarLinesOnly /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-label-custom">
|
||||
<!-- <Charts.ChartRadarLabelCustom /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-radius">
|
||||
<!-- <Charts.ChartRadarRadius /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-custom">
|
||||
<!-- <Charts.ChartRadarGridCustom /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-fill">
|
||||
<!-- <Charts.ChartRadarGridFill /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-none">
|
||||
<!-- <Charts.ChartRadarGridNone /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle">
|
||||
<!-- <Charts.ChartRadarGridCircle /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle-no-lines">
|
||||
<!-- <Charts.ChartRadarGridCircleNoLines /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-grid-circle-fill">
|
||||
<!-- <Charts.ChartRadarGridCircleFill /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-legend">
|
||||
<!-- <Charts.ChartRadarLegend /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radar-icons">
|
||||
<!-- <Charts.ChartRadarIcons /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
<Separator />
|
||||
<div
|
||||
id="radial-chart"
|
||||
class="chart-wrapper grid flex-1 scroll-mt-20 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:gap-10"
|
||||
>
|
||||
<ChartDisplay name="chart-radial-simple">
|
||||
<!-- <Charts.ChartRadialSimple /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-label">
|
||||
<!-- <Charts.ChartRadialLabel /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-grid">
|
||||
<!-- <Charts.ChartRadialGrid /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-text">
|
||||
<!-- <Charts.ChartRadialText /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-shape">
|
||||
<!-- <Charts.ChartRadialShape /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
<ChartDisplay name="chart-radial-stacked">
|
||||
<!-- <Charts.ChartRadialStacked /> -->
|
||||
<ChartAreaStacked />
|
||||
</ChartDisplay>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ChartsLayout>
|
||||
</template>
|
||||
|
|
@ -30,6 +30,14 @@ export const docsConfig: DocsConfig = {
|
|||
title: 'Components',
|
||||
href: '/docs/components/accordion',
|
||||
},
|
||||
{
|
||||
title: 'Blocks',
|
||||
href: '/blocks',
|
||||
},
|
||||
{
|
||||
title: 'Charts',
|
||||
href: '/charts',
|
||||
},
|
||||
{
|
||||
title: 'Themes',
|
||||
href: '/themes',
|
||||
|
|
@ -38,15 +46,6 @@ export const docsConfig: DocsConfig = {
|
|||
title: 'Examples',
|
||||
href: '/examples/mail',
|
||||
},
|
||||
{
|
||||
title: 'Blocks',
|
||||
href: '/blocks',
|
||||
},
|
||||
{
|
||||
title: 'GitHub',
|
||||
href: 'https://github.com/radix-vue/shadcn-vue',
|
||||
external: true,
|
||||
},
|
||||
],
|
||||
sidebarNav: [
|
||||
{
|
||||
|
|
|
|||
32
apps/www/.vitepress/theme/layout/ChartsLayout.vue
Normal file
32
apps/www/.vitepress/theme/layout/ChartsLayout.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script setup lang="ts">
|
||||
import PageHeader from '../components/PageHeader.vue'
|
||||
import Announcement from '../components/Announcement.vue'
|
||||
import PageHeaderHeading from '../components/PageHeaderHeading.vue'
|
||||
import PageHeaderDescription from '../components/PageHeaderDescription.vue'
|
||||
import PageAction from '../components/PageAction.vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader class="page-header pb-8">
|
||||
<Announcement />
|
||||
<PageHeaderHeading>Beautiful Charts</PageHeaderHeading>
|
||||
<PageHeaderDescription>
|
||||
Built using Unovis. Copy and paste into your apps. Open Source.
|
||||
</PageHeaderDescription>
|
||||
|
||||
<PageAction>
|
||||
<a
|
||||
href="/docs/charts.html"
|
||||
:class="cn(buttonVariants(), 'rounded-[6px]')"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</PageAction>
|
||||
</PageHeader>
|
||||
|
||||
<section id="charts" class="grid scroll-mt-20">
|
||||
<slot />
|
||||
</section>
|
||||
</template>
|
||||
9
apps/www/src/content/charts.md
Normal file
9
apps/www/src/content/charts.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Beautiful Charts
|
||||
---
|
||||
|
||||
<script setup lang="ts">
|
||||
import Charts from "../../.vitepress/theme/components/charts/Charts.vue"
|
||||
</script>
|
||||
|
||||
<Charts />
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Theming - shadcn-vue
|
||||
title: Theming
|
||||
---
|
||||
|
||||
<script setup>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<script setup lang="ts">
|
||||
import ChartContainer from '../ui/chart/ChartContainer.vue'
|
||||
import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
|
||||
|
||||
const chartData = [
|
||||
{ month: 'January', desktop: 186, mobile: 80 },
|
||||
{ month: 'February', desktop: 305, mobile: 200 },
|
||||
{ month: 'March', desktop: 237, mobile: 120 },
|
||||
{ month: 'April', desktop: 73, mobile: 190 },
|
||||
{ month: 'May', desktop: 209, mobile: 130 },
|
||||
{ month: 'June', desktop: 214, mobile: 140 },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Area Chart - Stacked</CardTitle>
|
||||
<CardDescription>
|
||||
Showing total visitors for the last 6 months
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer>
|
||||
<AreaChart :margin="{ bottom: 0, left: -10, right: 0, top: 0 }" :data="chartData" index="month" :show-y-axis="false" :show-legend="false" :categories="['desktop', 'mobile']" />
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<div className="flex w-full items-start gap-2 text-sm">
|
||||
<div className="grid gap-2">
|
||||
<div className="flex items-center gap-2 font-medium leading-none">
|
||||
Trending up by 5.2% this month <TrendingUp class-name="h-4 w-4" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2 leading-none text-muted-foreground">
|
||||
January - June 2024
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</template>
|
||||
|
|
@ -61,7 +61,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
|
||||
<div :class="cn('w-full flex flex-col items-end', $attrs.class ?? '')">
|
||||
<ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
|
||||
|
||||
<VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="cn('flex aspect-video justify-center text-xs', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user