feat: Contacts layout

2024-11-04 15:14:01 +05:30
parent 8cdbdaaa07
commit a7bf762bcd
8 changed files with 118 additions and 15 deletions
@@ -0,0 +1,94 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+
+defineProps({
+  headerTitle: {
+    type: String,
+    default: '',
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  showPaginationFooter: {
+    type: Boolean,
+    default: true,
+  },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalItems: {
+    type: Number,
+    default: 100,
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 15,
+  },
+});
+
+const emit = defineEmits(['filter', 'more', 'message', 'update:currentPage']);
+
+const updateCurrentPage = page => {
+  emit('update:currentPage', page);
+};
+</script>
+
+<template>
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
+    <header class="sticky top-0 z-10 px-6 lg:px-0">
+      <div class="w-full max-w-[900px] mx-auto">
+        <div class="flex items-center justify-between w-full h-20 gap-2">
+          <span class="text-xl font-medium text-n-slate-12">
+            {{ headerTitle }}
+          </span>
+          <div class="flex items-center gap-2">
+            <div class="flex items-center gap-2">
+              <Input
+                :placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
+                :custom-input-class="['h-8 ltr:!pl-8 rtl:!pr-8']"
+              >
+                <template #prefix>
+                  <Icon
+                    icon="i-lucide-search"
+                    class="absolute -translate-y-1/2 text-n-slate-11 size-4 top-1/2 ltr:left-2 rtl:right-2"
+                  />
+                </template>
+              </Input>
+            </div>
+            <Button
+              icon="i-lucide-list-filter"
+              size="sm"
+              color="slate"
+              @click="emit('filter')"
+            />
+            <Button
+              icon="i-lucide-ellipsis-vertical"
+              size="sm"
+              color="slate"
+              @click="emit('more')"
+            />
+            <Button :label="buttonLabel" size="sm" @click="emit('message')" />
+          </div>
+        </div>
+      </div>
+    </header>
+    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
+      <div class="w-full max-w-[900px] mx-auto py-4">
+        <slot name="default" />
+      </div>
+    </main>
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
+      <PaginationFooter
+        :current-page="currentPage"
+        :total-items="totalItems"
+        :items-per-page="itemsPerPage"
+        @update:current-page="updateCurrentPage"
+      />
+    </footer>
+  </section>
+</template>