Stude12/pc_builder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: PC Builder AdonisJS project

Browse Source
This commit is contained in:
Kevin
2026-06-28 10:41:51 +02:00
commit 648d0af538
144 changed files with 18570 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inertia/pages/layout/defaultLayout.vue
+20
View File
@@ -0,0 +1,20 @@
<script setup lang="ts">
import Sidebar from './sidebar.vue'
import Header from './header.vue'
</script>
<template>
<div class="flex h-screen bg-gray-200 font-roboto">
<Sidebar />
<div class="flex-1 flex flex-col overflow-hidden">
<Header />
<main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-200">
<div class="container mx-auto px-6 py-8">
<slot />
</div>
</main>
</div>
</div>
</template>
inertia/pages/layout/emptyLayout.vue
+5
View File
@@ -0,0 +1,5 @@
<template>
<div>
<slot />
</div>
</template>
inertia/pages/layout/header.vue
+99
View File
@@ -0,0 +1,99 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { useSidebar } from '~/composables/useSidebar'
import { Link, usePage } from '@inertiajs/vue3'
import { userProfileIcon } from '~/assets/icons'
import { useAdminMode } from '~/composables/isAdminMode'
const dropdownOpen = ref(false)
const { isOpen } = useSidebar()
const { isAdminActive } = useAdminMode()
function toggleActive() {
isAdminActive.value = !isAdminActive.value
}
const page = usePage()
const user = computed(() => {
const userData = (page.props as any).auth?.user || (page.props as any).user
return userData || { name: 'Guest', email: 'guest@example.com' }
})
</script>
<template>
<header class="flex items-center justify-between px-6 py-4 bg-white border-b-4 border-indigo-600">
<div class="flex items-center">
<button class="text-gray-500 focus:outline-none lg:hidden" @click="isOpen = true">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M4 6H20M4 12H20M4 18H11"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
<div class="flex items-center">
<div class="relative">
<button
class="relative z-10 block w-8 h-8 overflow-hidden rounded-full shadow focus:outline-none"
@click="dropdownOpen = !dropdownOpen"
>
<img class="object-cover w-full h-full" :src="userProfileIcon" alt="Your avatar" />
</button>
<div
v-show="dropdownOpen"
class="fixed inset-0 z-10 w-full h-full"
@click="dropdownOpen = false"
/>
<transition
enter-active-class="transition duration-150 ease-out transform"
enter-from-class="scale-95 opacity-0"
enter-to-class="scale-100 opacity-100"
leave-active-class="transition duration-150 ease-in transform"
leave-from-class="scale-100 opacity-100"
leave-to-class="scale-95 opacity-0"
>
<div
v-show="dropdownOpen"
class="absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl"
>
<div class="flex items-center justify-between px-4 py-2 text-sm text-indigo-600">
<strong>{{ user.name }}</strong>
</div>
<hr />
<div
class="flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white cursor-pointer"
@click="toggleActive"
>
<span>{{ isAdminActive ? 'Admin' : 'Classic' }}</span>
<button
:class="{ 'bg-indigo-800': isAdminActive, 'bg-gray-200': !isAdminActive }"
class="w-10 h-5 rounded-full focus:outline-none relative"
>
<span
:class="{ 'translate-x-5': isAdminActive, 'translate-x-0': !isAdminActive }"
class="block w-4 h-4 bg-white rounded-full shadow transform transition duration-300"
></span>
</button>
</div>
<Link
href="/auth/logout"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-600 hover:text-white"
>
Logout
</Link>
</div>
</transition>
</div>
</div>
</header>
</template>
inertia/pages/layout/sidebar.vue
+99
View File
@@ -0,0 +1,99 @@
<script lang="ts" setup>
import { ref, useAttrs } from 'vue'
import { useSidebar } from '~/composables/useSidebar'
import { Link } from '@inertiajs/vue3'
import { siteIcon } from '~/assets/icons'
const { isOpen } = useSidebar()
const activeClass = ref('bg-gray-600/25 text-gray-100 border-gray-100')
const inactiveClass = ref(
'border-gray-900 text-gray-500 hover:bg-gray-600/25 hover:text-gray-100'
)
const route = useAttrs()
console.log(route)
</script>
<template>
<div class="flex">
<!-- Backdrop -->
<div
:class="isOpen ? 'block' : 'hidden'"
class="fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden"
@click="isOpen = false"
/>
<!-- End Backdrop -->
<div
:class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
class="fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:translate-x-0 lg:static lg:inset-0"
>
<div class="flex items-center justify-center mt-8">
<div class="flex items-center">
<img :src="siteIcon" style="width: 64px; height: 64px; fill: aliceblue" />
<span class="mx-2 text-2xl font-semibold text-white">PC CREATOR</span>
</div>
</div>
<nav class="mt-10">
<Link
:class="[$page.url.startsWith('/computers') ? activeClass : inactiveClass]"
class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
href="/computers"
>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 512.000000 512.000000"
xmlns="http://www.w3.org/2000/svg"
>
<g stroke="none" transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)">
<path
d="M660 5089 c-116 -59 -216 -180 -257 -314 -17 -57 -18 -120 -18 -1140 0 -1014 1 -1082 18 -1112 31 -58 53 -63 287 -63 l210 0 0 1090 0 1090 1660 0 1660 0 0 -1090 0 -1090 210 0 c234 0 256 5 287 63 17 30 18 98 18 1112 0 1020 -1 1083 -18 1140 -41 134 -141 255 -257 314 l-63 31 -1837 0 -1837 0 -63 -31z m1948 -157 c17 -22 15 -62 -5 -84 -34 -38 -103 -11 -103 42 0 61 70 89 108 42z"
/>
<path
d="M2055 3549 c-38 -5 -92 -15 -119 -22 l-49 -13 386 -334 c430 -372 439 -382 438 -489 0 -33 -7 -76 -16 -98 -11 -25 -100 -122 -272 -295 -290 -290 -308 -303 -419 -296 -46 3 -72 11 -102 31 -23 15 -188 197 -369 406 -180 209 -331 380 -334 380 -16 2 -40 -178 -40 -289 2 -395 212 -734 566 -912 167 -85 319 -113 545 -104 125 6 166 4 214 -9 72 -19 145 -55 198 -96 21 -17 261 -304 533 -637 271 -334 510 -620 530 -636 143 -112 323 -132 487 -55 87 42 351 304 395 394 67 133 70 263 10 389 -56 119 8 61 -852 760 -425 345 -497 411 -535 486 -48 97 -54 135 -55 370 -1 197 -4 234 -22 302 -52 185 -134 330 -262 462 -168 174 -374 275 -616 305 -101 12 -139 12 -240 0z m2116 -2684 c102 -35 169 -130 169 -239 -1 -177 -161 -295 -332 -244 -48 14 -123 78 -147 127 -72 141 5 315 159 362 42 12 104 10 151 -6z"
/>
<path
d="M380 2259 c-19 -12 -112 -115 -208 -231 l-173 -210 3 -161 c3 -183 12 -212 80 -278 74 -71 41 -69 917 -69 l786 1 -92 38 c-371 154 -651 476 -749 859 l-18 72 -256 0 c-240 0 -257 -2 -290 -21z m92 -606 c79 -79 25 -213 -87 -213 -127 0 -174 164 -66 234 41 26 115 16 153 -21z"
/>
<path
d="M3465 2258 c15 -51 63 -95 383 -355 l335 -273 316 0 c354 0 361 -1 361 -64 0 -63 -9 -65 -274 -68 l-237 -3 114 -92 114 -93 165 0 c190 0 236 11 296 69 68 66 77 95 80 278 l3 162 -178 215 c-137 165 -187 218 -216 230 -33 14 -116 16 -653 16 l-615 0 6 -22z"
/>
</g>
</svg>
<span class="mx-4">Computers</span>
</Link>
<Link
:class="[$page.url.startsWith('/components') ? activeClass : inactiveClass]"
class="flex items-center px-6 py-2 mt-4 duration-200 border-l-4"
href="/components"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 3C3.89543 3 3 3.89543 3 5V7C3 8.10457 3.89543 9 5 9H7C8.10457 9 9 8.10457 9 7V5C9 3.89543 8.10457 3 7 3H5Z"
/>
<path
d="M5 11C3.89543 11 3 11.8954 3 13V15C3 16.1046 3.89543 17 5 17H7C8.10457 17 9 16.1046 9 15V13C9 11.8954 8.10457 11 7 11H5Z"
/>
<path
d="M11 5C11 3.89543 11.8954 3 13 3H15C16.1046 3 17 3.89543 17 5V7C17 8.10457 16.1046 9 15 9H13C11.8954 9 11 8.10457 11 7V5Z"
/>
<path
d="M11 13C11 11.8954 11.8954 11 13 11H15C16.1046 11 17 11.8954 17 13V15C17 16.1046 16.1046 17 15 17H13C11.8954 17 11 16.1046 11 15V13Z"
/>
</svg>
<span class="mx-4">Components</span>
</Link>
</nav>
</div>
</div>
</template>