33 lines
922 B
Vue
33 lines
922 B
Vue
 
|
<template>
|
||
|
|
<div class="overflow-hidden" :class="className">
|
||
|
|
<div class="animate-marquee flex w-max" :style="{ '--marquee-duration': `${duration}s` } as any">
|
||
|
|
<div v-for="dup in 2" :key="dup" class="flex shrink-0 items-center">
|
||
|
|
<span v-for="(item, i) in items" :key="`${dup}-${i}`" class="flex items-center">
|
||
|
|
<span class="mx-5 whitespace-nowrap md:mx-8" :class="itemClassName">{{ item }}</span>
|
||
|
|
<span class="text-volt/70" :class="separatorClassName">{{ separator }}</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
items: string[];
|
||
|
|
duration?: number;
|
||
|
|
className?: string;
|
||
|
|
itemClassName?: string;
|
||
|
|
separatorClassName?: string;
|
||
|
|
separator?: string;
|
||
|
|
}>(),
|
||
|
|
{
|
||
|
|
duration: 24,
|
||
|
|
className: "",
|
||
|
|
itemClassName: "",
|
||
|
|
separatorClassName: "",
|
||
|
|
separator: "✦",
|
||
|
|
},
|
||
|
|
);
|
||
|
|
</script>
|