Initial commit: PC Builder AdonisJS project

inertia/pages/components/index.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3'
+
+defineProps<{ components: any[] }>()
+</script>
+
+<template>
+  <div>
+    <div class="flex justify-between items-center">
+      <h3 class="text-3xl font-semibold text-gray-700">Components</h3>
+      <Link
+        href="/components/create"
+        type="button"
+        class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition"
+      >
+        Add
+      </Link>
+    </div>
+
+    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <template v-if="components.length > 0">
+        <div
+          v-for="component in components"
+          :key="component.id"
+          class="p-4 border rounded-lg shadow hover:shadow-lg transition"
+        >
+          <h4 class="font-semibold text-lg text-gray-800">{{ component.name }}</h4>
+          <p class="text-gray-600">Type: {{ component.type?.name }}</p>
+          <p class="text-indigo-600 font-semibold">Price: ${{ component.price }}</p>
+          <Link
+            :href="`/components/${component.id}`"
+            class="mt-2 inline-block text-indigo-600 hover:text-indigo-700"
+          >
+            View Details
+          </Link>
+        </div>
+      </template>
+      <template v-else>
+        <p class="text-gray-500">No components yet. Create one to get started!</p>
+      </template>
+    </div>
+  </div>
+</template>