added whole content

components/ui/UiActionButton.vue

@@ -0,0 +1,115 @@
+<template>
+  <NuxtLink
+    :class="[
+      $style.button,
+      $attrs.style,
+      $style[`variant-${variant}`],
+      $style[`size-${size}`],
+      {
+        [$style.prefixed]: $slots.prefix,
+        [$style.suffixed]: $slots.suffix,
+      },
+    ]"
+    :to="href"
+  >
+    <span v-if="$slots.prefix" :class="$style.prefix">
+      <slot name="prefix" />
+    </span>
+
+    <span :class="$style.title">
+      <slot />
+    </span>
+
+    <span v-if="$slots.suffix" :class="$style.suffix">
+      <slot name="suffix" />
+    </span>
+  </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  href: string;
+  size?: "md";
+  variant?: "outline";
+}
+
+withDefaults(defineProps<Props>(), {
+  size: "md",
+  variant: "outline",
+});
+</script>
+
+<style lang="scss" module>
+.button {
+  color: white;
+  border-radius: 8px;
+  text-decoration: none;
+
+  &.variant-outline {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--color-text) 0 0 0 1px;
+    color: var(--color-text);
+    overflow: hidden;
+    position: relative;
+    transition: all 250ms;
+
+    &::after {
+      content: " ";
+      background: var(--color-primary);
+      position: absolute;
+      inset: 0;
+      transform: scale(0);
+      opacity: 0;
+      transition: all 250ms;
+      z-index: 0;
+      border-radius: 8px;
+    }
+
+    &:hover {
+      color: var(--color-background);
+      box-shadow: var(--color-background) 0 0 0 1px;
+
+      &::after {
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+  }
+
+  &.size-md {
+    height: 40px;
+    padding: 0 30px;
+
+    &.prefixed,
+    &.suffixed {
+      padding: 0 10px 0 20px;
+    }
+
+    &.suffixed {
+      padding-right: 0 20px 0 10px;
+    }
+  }
+}
+
+.title {
+  z-index: 1;
+  position: relative;
+
+  .size-md.prefixed & {
+    padding-left: 10px;
+  }
+
+  .size-md.suffixed & {
+    padding-right: 10px;
+  }
+}
+
+.prefix,
+.suffix {
+  display: inline-flex;
+  position: relative;
+  z-index: 2;
+}
+</style>

components/ui/UiStars.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :class="$style.rating">
+    <IconsIconStar
+      v-for="i in 5"
+      :width="22"
+      height="22"
+      :class="[$style.star, { [$style.filled]: i > count }]"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  count: number;
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss" module>
+@import "~~/assets/css/mixins";
+
+.rating {
+  display: flex;
+  flex-direction: row;
+  margin-left: -3px;
+
+  & > img {
+    margin-right: 2px;
+  }
+}
+
+.star {
+  stroke: none;
+  fill: currentColor;
+
+  @include color_per_child(
+    (
+      var(--color-rating-1),
+      var(--color-rating-2),
+      var(--color-rating-3),
+      var(--color-rating-4),
+      var(--color-rating-5)
+    )
+  );
+
+  &.filled {
+    fill: var(--color-line);
+  }
+}
+</style>