initial

apps/client/components/notify-button.vue

@@ -0,0 +1,57 @@
+<template>
+  <UiButton
+    :class="[cn.b(), cn.has('one', count === 1), cn.has('few', count > 1)]"
+    :icon="icon"
+    type="ghost"
+    color="secondary"
+    :data-count="countContent"
+  />
+</template>
+
+<script setup>
+const props = defineProps({ icon: { type: String }, count: { type: Number } })
+
+const cn = useClassname('notify-button')
+
+const countContent = computed(() => {
+  return props.count > 9 ? '9+' : props.count
+})
+</script>
+
+<style lang="scss">
+.notify-button {
+  position: relative;
+
+  &::after {
+    @include txt-s-m;
+
+    display: block;
+    position: absolute;
+    background-color: $clr-red-500;
+    color: $clr-white;
+  }
+
+  &.has-one {
+    &::after {
+      content: '';
+
+      width: 6px;
+      height: 6px;
+      border-radius: 3px;
+      top: 7px;
+      right: 7px;
+    }
+  }
+
+  &.has-few {
+    &::after {
+      content: attr(data-count);
+
+      top: 0px;
+      right: 0px;
+      padding-inline: 4px;
+      border-radius: 7px;
+    }
+  }
+}
+</style>