feat(05-02): add Columns/Details/Video/Badge MDC components + full showcase article

2026-04-21 15:31:00 +02:00
parent 36cd7f11aa
commit 9848338619
5 changed files with 386 additions and 23 deletions
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+interface Props {
+  summary?: string
+  open?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  summary: 'Voir plus',
+  open: false,
+})
+</script>
+
+<template>
+  <details
+    :open="props.open"
+    class="not-prose my-4 rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden"
+  >
+    <summary
+      class="flex cursor-pointer select-none items-center justify-between px-4 py-3
+             text-sm font-medium text-neutral-700 dark:text-neutral-300
+             hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors list-none"
+    >
+      {{ props.summary }}
+      <svg
+        class="size-4 shrink-0 text-neutral-400 transition-transform details-arrow"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </summary>
+    <div class="px-4 py-3 prose prose-neutral dark:prose-invert max-w-none
+                prose-code:before:content-none prose-code:after:content-none
+                prose-pre:p-0 prose-pre:bg-transparent text-sm">
+      <slot />
+    </div>
+  </details>
+</template>
+
+<style scoped>
+details[open] .details-arrow {
+  transform: rotate(180deg);
+}
+</style>