first commit

components/ui-components/list/SimpleList.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue';
+import { AppsIcon, CircleDotIcon, DragDropIcon, FolderIcon, ChevronUpIcon, ChevronDownIcon } from 'vue-tabler-icons';
+const props = defineProps(['icon']);
+const component = props.icon;
+// List 1,3 Data
+const list1 = shallowRef([
+    {
+        name: 'Sample Page',
+        icon: AppsIcon,
+        id: 1,
+        link: '/basic/list'
+    },
+    {
+        name: 'Elements',
+        icon: CircleDotIcon,
+        id: 2,
+        link: ''
+    },
+    {
+        name: 'Page Layouts',
+        icon: FolderIcon,
+        id: 3,
+        link: ''
+    },
+    {
+        name: 'Components',
+        icon: DragDropIcon,
+        id: 4,
+        link: ''
+    }
+]);
+
+</script>
+<template>
+    
+    <v-list>
+        <v-card variant="outlined" class="py-2">
+        <v-list-item class="mb-2" v-for="(list, i) in list1" :value="list" rounded="md" :key="i" color="primary">
+            <template v-slot:prepend>
+                <component :is="list.icon" size="20" stroke-width="1.5" class="mr-2" />
+            </template>
+            <v-list-item-title v-text="list.name"></v-list-item-title>
+        </v-list-item>
+    </v-card>
+    </v-list>
+
+</template>