47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<template>
|
|
<div :class="['guild-divider', spacing]" role="separator" aria-hidden="true">
|
|
<!-- Woodcut: irregular hand-drawn line -->
|
|
<svg
|
|
v-if="variant === 'woodcut'"
|
|
viewBox="0 0 800 12"
|
|
preserveAspectRatio="none"
|
|
class="w-full h-3 text-guild-600"
|
|
>
|
|
<path
|
|
d="M0,6 Q50,3 100,7 T200,5 T300,8 T400,4 T500,7 T600,5 T700,8 T800,6"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
fill="none"
|
|
stroke-dasharray="8,3,15,4,6,5"
|
|
/>
|
|
</svg>
|
|
|
|
<!-- Dither: warm amber dithered line -->
|
|
<div v-else-if="variant === 'dither'" class="h-px dithered-warm opacity-60" />
|
|
|
|
<!-- Dots: halftone dot row -->
|
|
<div
|
|
v-else-if="variant === 'dots'"
|
|
class="h-2 halftone-texture opacity-30"
|
|
/>
|
|
|
|
<!-- Simple: plain rule -->
|
|
<hr v-else class="border-guild-700" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
variant: {
|
|
type: String,
|
|
default: 'simple',
|
|
validator: (v) => ['simple', 'woodcut', 'dither', 'dots'].includes(v),
|
|
},
|
|
compact: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const spacing = computed(() => props.compact ? 'my-4' : 'my-8')
|
|
</script>
|