first commit

resources/js/Components/List/List.vue

@@ -0,0 +1,35 @@
+<script setup>
+import {computed} from "vue";
+
+const props = defineProps({
+    vertical: {
+        type: String,
+        default: 'vertical'
+    }
+})
+
+const verticalClasses = [
+    'flex', 'flex-col', 'gap-y-2'
+]
+
+const horizontalClasses = [
+    'grid', 'grid-cols-3', 'gap-y-2', 'gap-x-2', 'grow', 'items-start'
+]
+
+const classes = computed(() => {
+    if (props.vertical)
+        return verticalClasses
+
+    return horizontalClasses
+})
+</script>
+
+<template>
+    <div :class="classes">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/List/ListItem.vue

@@ -0,0 +1,31 @@
+<script setup>
+import {onMounted, ref} from "vue";
+
+const componentRef = ref()
+</script>
+
+<template>
+    <div ref="componentRef"
+         @mouseenter="componentRef.setAttribute('data-hover', '')"
+         @mouseleave="componentRef.removeAttribute('data-hover')"
+         class="flex flex-col max-lg:flex-row gap-y-1 px-2 sm:py-2 py-2.5 rounded-md transition-all data-hover:bg-zinc-950/5 dark:data-hover:bg-white/5 active:scale-[.99]">
+        <div v-if="$slots.header || $slots.actions" class="flex justify-between items-center">
+            <div v-if="$slots.header" class="text-sm font-medium">
+                <slot name="header" />
+            </div>
+            <div v-if="$slots.actions">
+                <slot name="actions" />
+            </div>
+        </div>
+        <div v-if="$slots.default">
+            <slot />
+        </div>
+        <div v-if="$slots.footer">
+            <slot name="footer" />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/List/ListStrate.vue

@@ -0,0 +1,21 @@
+<script setup>
+const props = defineProps({
+    header: {
+        type: String,
+    }
+})
+</script>
+
+<template>
+    <div class="px-3 pt-2 pb-4 first:rounded-t-lg first:rounded-b-sm lg:ring-1 lg:ring-zinc-950/10 dark:lg:ring-white/10 last:rounded-b-lg last:rounded-t-sm not-last:not-first:rounded-sm not-last:not-first:my-1 bg-white dark:text-white lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-800">
+        <slot v-if="$slots.header" name="header" />
+            <span v-else class="block text-sm font-medium mb-2">
+                {{ header }}
+            </span>
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+
+</style>