initial

apps/client/components/settings/property-item.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="settings-property-item">
+    <Component
+      :is="resolveComponent(`ui-icon-${icon}`)"
+      class="settings-property-item__icon"
+    />
+
+    <div class="settings-property-item-content">
+      <p class="settings-property-item-content__title">
+        {{ title }}
+      </p>
+      <p v-if="text" class="settings-property-item-content__text">
+        {{ text }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  icon: { type: String, required: true },
+  title: { type: String, required: true },
+  text: { type: String },
+})
+</script>
+
+<style lang="scss">
+.settings-property-item {
+  display: flex;
+  align-items: center;
+
+  &__icon{
+    color: $clr-cyan-500;
+    margin-right: 10px;
+  }
+
+}
+
+.settings-property-item-content{
+  &__title {
+    @include txt-i-sb;
+  }
+
+  &__text {
+    @include txt-s-m;
+    margin-top: 4px;
+    color: $clr-grey-500;
+  }
+}
+</style>