add: contacts module & actions to private list

src/components/CustomSearchInput.vue

@@ -0,0 +1,43 @@
+<script setup>
+
+    const props = defineProps({
+        saerch: {
+            type: [String]
+        },
+        placeholder: {
+            type: String,
+        }
+    })
+
+    defineEmits(['update:saerch'])
+
+</script>
+
+<template>
+    <div class="mb-4"> 
+        <input 
+            class="custom-search"
+            type="search" 
+            name="search" 
+            :placeholder="placeholder"
+            :value="saerch"
+            @input="$event => $emit('update:saerch', $event.target.value)"
+        />
+    </div>
+</template>
+
+<style scoped>
+
+    .custom-search {
+        width: 100%;
+        padding: 12px 16px;
+        border: 1px solid rgb(222, 214, 214);
+        border-radius: 5px;
+    }
+
+    .custom-search:focus {
+        outline: none;
+        border-color: rgb(217, 202, 202);
+    }
+
+</style>