Init commit

components/Badge.vue

@@ -0,0 +1,18 @@
+<template>
+  <span class="badge text-bg-dark border text-dark-emphasis fw-normal d-flex align-items-center gap-2 bg-transparent bg-blur-4 border-light border-opacity-25">
+    <MaterialIcon :size="24" :name="name" />
+    <slot></slot>
+  </span>
+</template>
+
+<script setup lang="ts">
+import MaterialIcon from './MaterialIcon.vue';
+
+defineProps<{
+  name: string
+}>();
+</script>
+
+<style lang="scss" scoped>
+
+</style>

components/MaterialIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg :width="size" :height="size">
+    <image :href="`/lib/MaterialDesign/svg/${name}.svg`"
+      :width="size"
+      :height="size"/>
+  </svg>
+</template>
+
+<script setup lang="ts">
+  defineProps<{
+    name: string,
+    size: number
+  }>();
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

components/Pagination.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="btn-group">
+    <NuxtLink :class="`btn btn-outline-dark ${hasFurtherPreviousCss}`">
+      <MaterialIcon name="chevron-double-left" :size="32" />
+    </NuxtLink>
+    <NuxtLink :class="`btn btn-outline-dark ${hasPreviousCss}`">
+      <MaterialIcon name="chevron-left" :size="32" />
+    </NuxtLink>
+    <NuxtLink :class="`btn btn-outline-dark text-light`">
+      {{ pageIndex / totalPages }}
+    </NuxtLink>
+    <NuxtLink :class="`btn btn-outline-dark ${hasNextCss}`">
+      <MaterialIcon name="chevron-right" :size="32" />
+    </NuxtLink>
+    <NuxtLink :class="`btn btn-outline-dark ${hasFurtherNextCss}`">
+      <MaterialIcon name="chevron-double-right" :size="32" />
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MaterialIcon from './MaterialIcon.vue';
+
+const props = defineProps<{
+  hasPrevious: boolean;
+  hasFurtherPrevious: boolean;
+  hasNext: boolean;
+  hasFurtherNext: boolean;
+  pageIndex: number;
+  totalPages: number;
+}>();
+
+const hasPreviousCss = !props.hasPrevious ? "disabled" : "";
+const hasFurtherPreviousCss = !props.hasFurtherPrevious ? "disabled" : "";
+const hasNextCss = !props.hasNext ? "disabled" : "";
+const hasFurtherNextCss = !props.hasFurtherNext ? "disabled" : "";
+</script>
+
+<style lang="scss" scoped>
+
+</style>

components/TheTitle.vue

@@ -0,0 +1,3 @@
+<template>
+  <span>Clean Cuts</span>
+</template>