feat(Separator): new component (#46)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

playground/app.vue

@@ -28,6 +28,7 @@ const components = [
   'navigation-menu',
   'popover',
   'radio-group',
+  'separator',
   'skeleton',
   'slideover',
   'switch',

playground/pages/separator.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <div>
+      <p class="font-semibold text-gray-900 dark:text-white">
+        Nuxt UI
+      </p>
+      <p>An open-source UI component library.</p>
+    </div>
+
+    <USeparator icon="i-simple-icons-nuxtdotjs" type="dashed" />
+
+    <div class="h-24 flex gap-4 items-center">
+      <div class="flex-1 text-center">
+        Blog
+      </div>
+
+      <USeparator
+        :avatar="{ size: 'sm', src: 'https://avatars.githubusercontent.com/u/739984?v=4' }"
+        decorative
+        orientation="vertical"
+      />
+
+      <div class="flex-1 text-center">
+        Docs
+      </div>
+
+      <USeparator decorative orientation="vertical">
+        <UAvatar src="https://avatars.githubusercontent.com/u/13056429?v=4" />
+      </USeparator>
+
+      <div class="flex-1 text-center">
+        Source
+      </div>
+    </div>
+
+    <USeparator label="As simple as it gets" type="dotted" size="lg" color="primary" />
+  </div>
+</template>