initial

apps/client/components/page/block.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="page-block">
+    <div class="page-block__header">
+      <div class="d-flex flex-column">
+        <div class="d-flex align-items-center" style="gap: 16px">
+          <h3 v-if="title">
+            {{ title }}
+          </h3>
+
+          <slot name="badge" />
+        </div>
+        <span v-if="subTitle" class="page-block__subtitle">{{ subTitle }}</span>
+      </div>
+
+      <slot name="actions" />
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String },
+  subTitle: { type: String },
+})
+</script>
+
+<style lang="scss">
+.page-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--page-block-gap, 8px);
+
+  border-radius: 12px;
+  padding:  var(--page-block-padding, 16px);
+  background-color: $clr-white;
+
+  &__header{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__subtitle{
+    @include txt-i-m;
+    margin-top: 4px;
+    color: $clr-grey-500;
+
+  }
+}
+</style>