36 lines
997 B
Vue
36 lines
997 B
Vue
<template>
|
|
<div class="overflow-hidden" :class="className" dir="ltr">
|
|
<div
|
|
class="animate-marquee flex w-max will-change-transform"
|
|
:style="{ '--marquee-duration': `${duration}s` } as any"
|
|
>
|
|
<div v-for="dup in 2" :key="dup" class="flex shrink-0 items-center" :aria-hidden="dup > 1">
|
|
<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-current/40" :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: 28,
|
|
className: "",
|
|
itemClassName: "",
|
|
separatorClassName: "",
|
|
separator: "✦",
|
|
},
|
|
);
|
|
</script>
|