@datagouv/components-next 0.0.1

package/src/components/DescriptionDetails.vue

@@ -0,0 +1,23 @@
+<template>
+  <dd
+    class="text-sm ml-0 mt-0 mb-4 text-gray-medium h-8 flex flex-wrap items-center"
+  >
+    <div
+      v-if="withEllipsis"
+      class="text-overflow-ellipsis"
+    >
+      <slot />
+    </div>
+    <slot v-else />
+  </dd>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  withEllipsis?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  withEllipsis: true,
+})
+</script>

package/src/components/DescriptionList/DescriptionDetails.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import DescriptionDetails from './DescriptionDetails.vue';
+
+const meta = {
+  title: "Components/Description List/Description Details",
+  component: DescriptionDetails,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: "The Description Details is a styled `<dd>` to use in the `<DescriptionList>` component."
+      }
+    }
+  },
+} satisfies Meta<typeof DescriptionDetails>;
+
+export default meta;
+
+export const Simple: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { DescriptionDetails },
+    setup() {
+      return { args };
+    },
+    template: '<dl class="fr-col-2"><DescriptionDetails v-bind="args">Some content inside the description details</DescriptionDetails></dl>',
+  }),
+  args: {
+    withEllipsis: false
+  }
+};
+
+export const WithEllipsis: StoryObj<typeof meta> = {
+    render: (args) => ({
+      components: { DescriptionDetails },
+      setup() {
+        return { args };
+      },
+      template: '<dl class="fr-col-2"><DescriptionDetails v-bind="args">Some content inside the description details</DescriptionDetails></dl>',
+    }),
+    args: {
+      withEllipsis: true
+    }
+  };

package/src/components/DescriptionList/DescriptionList.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import DescriptionList from './DescriptionList.vue';
+import DescriptionTerm from './DescriptionTerm.vue';
+import DescriptionDetails from './DescriptionDetails.vue';
+
+const meta = {
+  title: "Components/Description List/Description List",
+  component: DescriptionList,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: "The Description Details is a styled `<dd>` to use in the `<DescriptionList>` component."
+      }
+    }
+  },
+} satisfies Meta<typeof DescriptionList>;
+
+export default meta;
+
+export const Simple: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { DescriptionDetails, DescriptionList, DescriptionTerm },
+    setup() {
+      return { args };
+    },
+    template: `<DescriptionList>
+        <DescriptionTerm>The Term</DescriptionTerm>
+        <DescriptionDetails :withEllipsis="false">A really long details so we can see if it wraps to a new line or add ellipsis.</DescriptionDetails>
+    </DescriptionList>`,
+  }),
+  args: {}
+};
+
+export const WithEllipsis: StoryObj<typeof meta> = {
+    render: (args) => ({
+      components: { DescriptionDetails, DescriptionList, DescriptionTerm },
+      setup() {
+        return { args };
+      },
+      template: `<DescriptionList>
+      <DescriptionTerm>The Term</DescriptionTerm>
+      <DescriptionDetails>A really long details so we can see if it wraps to a new line or add ellipsis.</DescriptionDetails>
+  </DescriptionList>`,
+    }),
+    args: {}
+};

package/src/components/DescriptionList/DescriptionTerm.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import DescriptionTerm from './DescriptionTerm.vue';
+
+const meta = {
+  title: "Components/Description List/Description Term",
+  component: DescriptionTerm,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: "The Description Term is a styled `<dt>` to use in the `<DescriptionList>` component."
+      }
+    }
+  },
+} satisfies Meta<typeof DescriptionTerm>;
+
+export default meta;
+
+export const Simple: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { DescriptionTerm },
+    setup() {
+      return { args };
+    },
+    template: '<dl class="fr-col-2"><DescriptionTerm v-bind="args">The term</DescriptionTerm></dl>',
+  }),
+  args: {}
+};

package/src/components/DescriptionList.vue

@@ -0,0 +1,8 @@
+<template>
+  <dl class="fr-my-0">
+    <slot />
+  </dl>
+</template>
+
+<script setup lang="ts">
+</script>

package/src/components/DescriptionTerm.vue

@@ -0,0 +1,8 @@
+<template>
+  <dt class="fr-text--sm fr-my-0 fr-text--bold">
+    <slot />
+  </dt>
+</template>
+
+<script setup lang="ts">
+</script>

package/src/components/ExtraAccordion.vue

@@ -0,0 +1,78 @@
+<template>
+  <Disclosure
+    v-slot="{ open }"
+    as="div"
+  >
+    <header
+      class="flex flex-wrap items-center pb-6 mb-6 border-bottom border-gray-default"
+    >
+      <div class="fr-col">
+        <component
+          :is="titleLevel"
+          class="subtitle subtitle--uppercase fr-m-0"
+        >
+          {{ titleText }}
+        </component>
+      </div>
+      <div class="fr-col-auto">
+        <DisclosureButton
+          :as="BrandedButton"
+          color="secondary-softer"
+          keep-margins-even-without-borders
+          :icon="open ? RiArrowUpSLine : RiArrowDownSLine"
+        >
+          <template v-if="open">
+            {{ $t('Close details') }}
+          </template>
+          <template v-else>
+            {{ buttonText }}
+          </template>
+        </DisclosureButton>
+      </div>
+    </header>
+    <DisclosurePanel
+      :id="accordionId"
+      class="accordion-content"
+    >
+      <div class="pb-6 mb-6 border-bottom border-gray-default">
+        <div
+          class="fr-grid-row fr-grid-row--gutters fr-text--sm fr-m-0"
+          data-testid="extra-list"
+        >
+          <div
+            v-for="(value, key) in extra"
+            :key="key"
+            class="fr-col-12 fr-col-sm-6 fr-col-md-4"
+          >
+            <h3 class="subtitle fr-mb-1v">
+              {{ key }}
+            </h3>
+            <p class="text-sm m-0 text-gray-medium break-all">
+              {{ value }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </DisclosurePanel>
+  </Disclosure>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@headlessui/vue'
+import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/vue'
+import BrandedButton from './BrandedButton.vue'
+
+const accordionId = useId()
+
+defineProps<{
+  buttonText: string
+  titleText: string
+  extra: Record<string, unknown>
+  titleLevel: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'
+}>()
+</script>

package/src/components/Icons/Archive.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 14 13"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+  ><rect
+    x="0"
+    y="0"
+    width="14"
+    height="12.25"
+    style="fill:none;"
+  /><path
+    d="M12.688,0l-11.376,0c-0.738,0 -1.312,0.602 -1.312,1.313l-0,2.187c-0,0.246 0.191,0.438 0.437,0.438l0.438,-0.001l-0,7.438c-0,0.492 0.383,0.875 0.875,0.875l10.5,0c0.465,0 0.875,-0.383 0.875,-0.875l-0,-7.438l0.437,0c0.219,0 0.438,-0.191 0.438,-0.437l-0,-2.188c-0,-0.71 -0.602,-1.312 -1.313,-1.312Zm-0.875,10.938l-9.625,-0.001l0,-7l9.625,0l0,7Zm0.875,-8.312l-11.375,-0l0,-1.313l11.375,0l0,1.313Zm-7.109,3.937l2.844,0c0.164,0 0.328,-0.136 0.328,-0.328l0,-0.656c0,-0.164 -0.164,-0.328 -0.328,-0.328l-2.844,-0c-0.191,-0 -0.328,0.164 -0.328,0.328l-0,0.656c-0,0.192 0.137,0.328 0.328,0.328Z"
+    style="fill-rule:nonzero;"
+  /></svg>
+</template>

package/src/components/Icons/Code.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 11 14"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+  ><rect
+    x="0"
+    y="0"
+    width="10.5"
+    height="14"
+    style="fill:none;"
+  /><path
+    d="M4.074,9.57l0,-0.027l-0.902,-0.793l0.902,-0.766c0.11,-0.109 0.11,-0.246 0.028,-0.355l-0.493,-0.52c-0.082,-0.082 -0.246,-0.082 -0.328,0l-1.586,1.477c-0.082,0.109 -0.082,0.246 0,0.355l1.586,1.477c0.055,0.027 0.11,0.055 0.164,0.055c0.055,-0 0.137,-0.028 0.164,-0.055l0.493,-0.52c0.082,-0.109 0.082,-0.246 -0.028,-0.328Zm6.016,-6.89l-2.27,-2.297c-0.246,-0.246 -0.601,-0.383 -0.929,-0.383l-5.579,-0c-0.738,-0 -1.312,0.602 -1.312,1.312l-0,11.375c-0,0.739 0.574,1.313 1.312,1.313l7.876,-0c0.71,-0 1.312,-0.574 1.312,-1.313l0,-9.078c0,-0.328 -0.164,-0.683 -0.41,-0.929Zm-3.09,-1.258l2.078,2.078l-2.078,-0l0,-2.078Zm2.188,11.265l-7.876,0l0,-11.375l4.376,0l-0.001,2.844c0,0.383 0.274,0.656 0.657,0.656l2.843,0l0,7.875Zm-3.472,-6.835c-0.137,-0.028 -0.246,0.054 -0.301,0.164l-1.477,5.168c-0.054,0.109 0.028,0.246 0.165,0.273l0.656,0.219c0.136,0.027 0.273,-0.055 0.301,-0.164l1.503,-5.168c0.028,-0.11 -0.054,-0.246 -0.164,-0.301l-0.683,-0.191Zm0.683,2.105l0,0.027l0.903,0.766l-0.903,0.793c-0.109,0.109 -0.109,0.246 -0.027,0.355l0.492,0.52c0.082,0.082 0.246,0.082 0.328,-0l1.586,-1.477c0.082,-0.109 0.082,-0.273 0,-0.355l-1.586,-1.477c-0.082,-0.082 -0.246,-0.082 -0.328,0l-0.492,0.52c-0.082,0.082 -0.082,0.246 0.027,0.328Z"
+    style="fill-rule:nonzero;"
+  /></svg>
+</template>

package/src/components/Icons/Documentation.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 13 14"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+  ><rect
+    x="0"
+    y="0"
+    width="12.25"
+    height="14"
+    style="fill:none;"
+  /><path
+    d="M3.5,4.156c0,0.137 0.082,0.219 0.219,0.219l5.687,0c0.11,0 0.219,-0.082 0.219,-0.219l0,-0.875c0,-0.109 -0.109,-0.218 -0.219,-0.218l-5.687,-0c-0.137,-0 -0.219,0.109 -0.219,0.218l-0,0.875Zm0.219,2.407l5.687,-0c0.11,-0 0.219,-0.083 0.219,-0.219l0,-0.875c0,-0.11 -0.109,-0.219 -0.219,-0.219l-5.687,0c-0.137,0 -0.219,0.109 -0.219,0.219l-0,0.875c-0,0.136 0.082,0.219 0.219,0.219Zm8.175,4.375c0.192,-0.028 0.356,-0.219 0.356,-0.438l-0,-10.062c-0,-0.219 -0.219,-0.438 -0.438,-0.438l-9.625,0c-1.23,0 -2.187,0.984 -2.187,2.188l-0,9.625c-0,1.23 0.957,2.187 2.187,2.187l9.625,0c0.219,0 0.438,-0.191 0.438,-0.437l-0,-0.438c-0,-0.191 -0.164,-0.383 -0.356,-0.41c-0.136,-0.356 -0.136,-1.422 0,-1.777Zm-1.121,-0c-0.082,0.492 -0.082,1.285 0,1.75l-8.586,-0c-0.492,-0 -0.875,-0.383 -0.875,-0.875c0,-0.465 0.383,-0.875 0.875,-0.875l8.586,-0Zm0.164,-9.625l0,8.312l-8.75,0c-0.328,0 -0.628,0.082 -0.875,0.191l0,-7.628c0,-0.465 0.383,-0.875 0.875,-0.875l8.75,-0Z"
+    style="fill-rule:nonzero;"
+  /></svg>
+</template>

package/src/components/Icons/File.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 11 14"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+  ><rect
+    x="0"
+    y="0"
+    width="10.5"
+    height="14"
+    style="fill:none;"
+  /><path
+    d="M10.09,2.68l-2.27,-2.297c-0.246,-0.246 -0.601,-0.383 -0.929,-0.383l-5.579,0c-0.738,0 -1.312,0.602 -1.312,1.313l-0,11.375c-0,0.738 0.574,1.312 1.312,1.312l7.876,0c0.71,0 1.312,-0.574 1.312,-1.313l0,-9.078c0,-0.328 -0.164,-0.683 -0.41,-0.929Zm-1.012,0.82l-2.078,0l0,-2.078l2.078,2.078Zm-7.765,9.188l-0,-11.376l4.375,0l-0,2.844c-0,0.383 0.273,0.656 0.656,0.656l2.844,0l-0,7.876l-7.875,-0.001Z"
+    style="fill-rule:nonzero;"
+  /></svg>
+</template>

package/src/components/Icons/Image.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  ><path d="M2.9918 21C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918ZM20 15V5H4V19L14 9L20 15ZM20 17.8284L14 11.8284L6.82843 19H20V17.8284ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z" /></svg>
+</template>

package/src/components/Icons/Link.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 14 14"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+  ><rect
+    x="0"
+    y="0"
+    width="13.986"
+    height="13.986"
+    style="fill:none;"
+  /><path
+    d="M8.593,5.394c-0.301,-0.301 -0.629,-0.52 -0.985,-0.711c-0.136,-0.055 -0.273,-0.028 -0.382,0.082l-0.11,0.109c-0.246,0.219 -0.383,0.52 -0.41,0.82c-0.027,0.137 0.055,0.274 0.164,0.356c0.192,0.082 0.492,0.273 0.629,0.437c0.902,0.903 0.902,2.352 0,3.254l-2.051,2.051c-0.902,0.902 -2.351,0.902 -3.254,0c-0.902,-0.902 -0.902,-2.352 0,-3.254l1.258,-1.258c0.082,-0.082 0.11,-0.191 0.082,-0.3c-0.054,-0.274 -0.109,-0.739 -0.137,-1.04c0,-0.273 -0.355,-0.41 -0.546,-0.218c-0.329,0.328 -0.848,0.847 -1.723,1.722c-1.504,1.504 -1.504,3.938 -0,5.414c1.477,1.504 3.91,1.504 5.414,0c2.242,-2.242 2.133,-2.132 2.297,-2.351c1.23,-1.477 1.148,-3.719 -0.246,-5.113Zm4.265,-4.266c-1.476,-1.504 -3.91,-1.504 -5.414,-0c-2.242,2.242 -2.132,2.133 -2.297,2.352c-1.23,1.476 -1.148,3.718 0.247,5.113c0.3,0.301 0.628,0.519 0.984,0.711c0.137,0.054 0.273,0.027 0.383,-0.082l0.109,-0.11c0.246,-0.218 0.383,-0.519 0.41,-0.82c0.028,-0.137 -0.054,-0.273 -0.164,-0.355c-0.191,-0.082 -0.492,-0.274 -0.629,-0.438c-0.902,-0.902 -0.902,-2.351 0,-3.254l2.051,-2.051c0.902,-0.902 2.352,-0.902 3.254,0c0.902,0.903 0.902,2.352 0,3.254l-1.258,1.258c-0.082,0.082 -0.109,0.192 -0.082,0.301c0.055,0.273 0.11,0.738 0.137,1.039c-0,0.273 0.355,0.41 0.547,0.219c0.328,-0.328 0.847,-0.848 1.722,-1.723c1.504,-1.504 1.504,-3.937 0,-5.414Z"
+    style="fill-rule:nonzero;"
+  /></svg>
+</template>

package/src/components/Icons/Table.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 14 13"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+  ><rect
+    x="0"
+    y="0"
+    width="14"
+    height="12.25"
+    style="fill:none;"
+  /><path
+    d="M12.688,0l-11.376,0c-0.738,0 -1.312,0.602 -1.312,1.313l-0,9.625c-0,0.738 0.574,1.312 1.312,1.312l11.375,0c0.711,0 1.313,-0.574 1.313,-1.313l-0,-9.625c-0,-0.71 -0.602,-1.312 -1.313,-1.312Zm-6.343,10.938l-4.867,-0.001c-0.11,0 -0.165,-0.054 -0.165,-0.164l0,-3.554l5.032,-0l-0,3.718Zm-0,-5.031l-5.032,0l0,-3.719l5.032,0l-0,3.719Zm6.179,5.031l-4.867,0l0,-3.718l5.031,-0l0,3.554c0,0.11 -0.082,0.164 -0.164,0.164Zm0.164,-5.031l-5.031,0l0,-3.719l5.031,0l0,3.719Z"
+    style="fill-rule:nonzero;"
+  /></svg>
+</template>

package/src/components/OrganizationCard.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="border border-gray-default relative fr-enlarge-link">
+    <div class="h-[4.5rem] pt-4 px-4 bg-blue-lighter" />
+    <div class="px-4 pb-4 pt-5 mt-2">
+      <div class="inline-flex border border-gray-default p-1.5 absolute top-4 left-4 bg-white">
+        <img
+          :src="organization.logo_thumbnail"
+          width="64"
+          height="64"
+          alt=""
+          loading="lazy"
+        >
+      </div>
+      <p class="mb-0.5 font-bold">
+        <NuxtLinkLocale
+          :to="`/organizations/${organization.slug}`"
+        >
+          <OrganizationNameWithCertificate
+            :show-type="false"
+            :organization
+          />
+        </NuxtLinkLocale>
+      </p>
+      <div class="mb-2 flex flex-wrap items-center">
+        <OwnerType
+          v-if="type !== 'other'"
+          class="mb-0 text-sm after:content-['—'] after:ml-1"
+          :type
+        />
+        <div>
+          <div class="text-gray-medium flex items-center text-sm gap-0.5">
+            <RiDatabase2Line class="size-4 -mt-1" /> {{ organization.metrics.datasets }}
+            <RiTerminalLine class="size-4 -mt-1 ml-1" /> {{ organization.metrics.dataservices }}
+            <RiLineChartLine class="size-4 -mt-1 ml-1" /> {{ organization.metrics.reuses }}
+          </div>
+        </div>
+      </div>
+      <p class="mt-1 mb-0">
+        <TextClamp
+          v-if="description"
+          :text="description"
+          :max-lines="3"
+        />
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiLineChartLine, RiDatabase2Line, RiTerminalLine } from '@remixicon/vue'
+import { computed, ref, watchEffect } from 'vue'
+import { removeMarkdown } from '../functions/markdown'
+import { getOrganizationType } from '../functions/organizations'
+import type { Organization } from '../types/organizations'
+import OwnerType from './OwnerType.vue'
+import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.vue'
+
+const props = defineProps<{
+  organization: Organization
+}>()
+
+const type = computed(() => getOrganizationType(props.organization))
+
+const description = ref('')
+watchEffect(async () => {
+  description.value = await removeMarkdown(props.organization.description)
+})
+</script>

package/src/components/OrganizationNameWithCertificate.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="flex gap-1 items-center truncate">
+    <OwnerTypeIcon
+      v-if="showType"
+      :type="getOrganizationType(organization)"
+    />
+    <div
+      class="mb-0 truncate flex-initial"
+      :class="{ 'text-sm': size === 'sm' }"
+    >
+      {{ organization.name }}
+    </div>
+    <RiCheckboxCircleLine
+      v-if="isOrganizationCertified(organization)"
+      class="flex-none"
+      :class="{
+        'size-4': size === 'sm',
+        'size-5': size === 'base',
+      }"
+      :title="t('The identity of this public service is certified by {certifier}', { certifier: config.name })"
+      aria-hidden="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiCheckboxCircleLine } from '@remixicon/vue'
+import { useI18n } from 'vue-i18n'
+import { getOrganizationType, isOrganizationCertified } from '../functions/organizations'
+import type { Organization } from '../types/organizations'
+import { useComponentsConfig } from '../config'
+import OwnerTypeIcon from './OwnerTypeIcon.vue'
+
+const config = useComponentsConfig()
+
+const { t } = useI18n()
+withDefaults(defineProps<{
+  organization: Organization
+  showType?: boolean
+  size?: 'base' | 'sm'
+}>(), {
+  showType: true,
+  size: 'base',
+})
+</script>

package/src/components/OwnerType.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :class="`${colorClass} flex items-center gap-1`">
+    <OwnerTypeIcon
+      :type="type"
+      class="size-4 -mt-1"
+    />
+    <div :class="sizeClass">
+      {{ name }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { findOrganizationType, type OrganizationTypes, type UserType } from '../functions/organizations'
+import OwnerTypeIcon from './OwnerTypeIcon.vue'
+
+const props = withDefaults(defineProps<{
+  type: OrganizationTypes | UserType
+  size?: 'base' | 'sm' | 'xs'
+  color?: 'black' | 'gray'
+}>(), {
+  size: 'sm',
+  color: 'gray',
+})
+
+const colorClass = computed(() => {
+  return {
+    black: 'text-gray-title',
+    gray: 'text-gray-medium',
+  }[props.color]
+})
+
+const sizeClass = computed(() => {
+  return {
+    base: 'text-base',
+    sm: 'text-sm',
+    xs: 'text-xs',
+  }[props.size]
+})
+
+const name = computed(() => findOrganizationType(props.type).label)
+</script>

package/src/components/OwnerTypeIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <component
+    :is="icon"
+    v-if="icon"
+    class="size-3.5 flex-none"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { findOrganizationType, type OrganizationTypes, type UserType } from '../functions/organizations'
+
+const props = defineProps<{
+  type: OrganizationTypes | UserType
+}>()
+
+const icon = computed(() => findOrganizationType(props.type).icon)
+</script>