refactor: ♻️ Refactor typography code in notes and profiles

components/typography/bold.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/lib/utils";
+
+interface Props extends PrimitiveProps {
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "strong",
+});
+</script>
+
+<template>
+    <Primitive
+        :as="as"
+        :as-child="asChild"
+        :class="cn('font-semibold', props.class)"
+    >
+        <slot />
+    </Primitive>
+</template>

components/typography/headings/large.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/lib/utils";
+
+interface Props extends PrimitiveProps {
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "h1",
+});
+</script>
+
+<template>
+    <Primitive
+        :as="as"
+        :as-child="asChild"
+        :class="cn('text-4xl font-extrabold tracking-tight text-balance', props.class)"
+    >
+        <slot />
+    </Primitive>
+</template>

components/typography/headings/medium.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/lib/utils";
+
+interface Props extends PrimitiveProps {
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "h2",
+});
+</script>
+
+<template>
+    <Primitive
+        :as="as"
+        :as-child="asChild"
+        :class="cn('text-3xl font-semibold tracking-tight', props.class)"
+    >
+        <slot />
+    </Primitive>
+</template>

components/typography/headings/small.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/lib/utils";
+
+interface Props extends PrimitiveProps {
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "h3",
+});
+</script>
+
+<template>
+    <Primitive
+        :as="as"
+        :as-child="asChild"
+        :class="cn('text-sm font-semibold tracking-tight', props.class)"
+    >
+        <slot />
+    </Primitive>
+</template>

components/typography/html.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/lib/utils";
+
+interface Props extends PrimitiveProps {
+    class?: HTMLAttributes["class"];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "div",
+});
+</script>
+
+<template>
+    <Primitive
+        :as="as"
+        :as-child="asChild"
+        :class="cn('prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline', $style.content, props.class)"
+    >
+        <slot />
+    </Primitive>
+</template>
+
+<style module>
+@import url("~/styles/content.css");
+</style>

components/typography/layout/col.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/lib/utils";
+
+interface Props extends PrimitiveProps {
+    class?: HTMLAttributes["class"];
+    wrap?: boolean;
+    centered?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "div",
+});
+</script>
+
+<template>
+    <Primitive
+        :as="as"
+        :as-child="asChild"
+        :class="cn('flex flex-col', props.wrap && 'flex-wrap', props.class, props.centered && 'items-center')"
+    >
+        <slot />
+    </Primitive>
+</template>

components/typography/layout/row.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/lib/utils";
+
+interface Props extends PrimitiveProps {
+    class?: HTMLAttributes["class"];
+    wrap?: boolean;
+    centered?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "div",
+});
+</script>
+
+<template>
+    <Primitive
+        :as="as"
+        :as-child="asChild"
+        :class="cn('flex flex-row', props.wrap && 'flex-wrap', props.class, props.centered && 'items-center')"
+    >
+        <slot />
+    </Primitive>
+</template>

components/typography/small.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/lib/utils";
+
+interface Props extends PrimitiveProps {
+    class?: HTMLAttributes["class"];
+    muted?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "span",
+});
+</script>
+
+<template>
+    <Primitive
+        :as="as"
+        :as-child="asChild"
+        :class="cn('text-xs', props.class, props.muted && 'text-muted-foreground')"
+    >
+        <slot />
+    </Primitive>
+</template>

components/typography/text.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { cn } from "~/lib/utils";
+
+interface Props extends PrimitiveProps {
+    class?: HTMLAttributes["class"];
+    muted?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    as: "p",
+});
+</script>
+
+<template>
+    <Primitive
+        :as="as"
+        :as-child="asChild"
+        :class="cn('leading-7', props.class, props.muted && 'text-muted-foreground')"
+    >
+        <slot />
+    </Primitive>
+</template>