Teren-app/resources/js/Components/app/ui/charts/AppChartDisplay.vue

36 lines
796 B
Vue

<script setup lang="ts">
import { cn } from "@/lib/utils";
import type { HTMLAttributes } from "vue";
import AppChartToolbar from "./AppChartToolbar.vue";
const props = defineProps<{
name: string;
class?: HTMLAttributes["class"];
}>();
</script>
<template>
<div
:class="
cn(
'group relative flex flex-col overflow-hidden rounded-xl border transition-all duration-200 ease-in-out hover:z-30',
props.class
)
"
>
<AppChartToolbar
:name
class="bg-card text-card-foreground relative z-20 flex justify-end border-b px-3 py-2.5"
>
<slot />
</AppChartToolbar>
<div
class="relative z-10 [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none"
>
<slot />
</div>
</div>
</template>
<style></style>