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

first fixes

Browse Source
This commit is contained in:
Kevin
2026-06-29 22:48:59 +02:00
parent 184de52ad2
commit 66a97be5c6
25 changed files with 646 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inertia/css/app.css
+3 -222
View File
@@ -2,18 +2,6 @@
@tailwind components;
@tailwind utilities;
:root {
--gray-1: oklch(98.5% 0 0);
--gray-2: oklch(97% 0 0);
--gray-3: oklch(92.2% 0 0);
--gray-4: oklch(87% 0 0);
--gray-6: oklch(55.6% 0 0);
--gray-7: oklch(43.9% 0 0);
--gray-8: oklch(37.1% 0 0);
--gray-10: oklch(26.9% 0 0);
--gray-12: oklch(14.5% 0 0);
}
* {
box-sizing: border-box;
margin: 0;
@@ -23,218 +11,11 @@
html,
body {
height: 100%;
font-family: system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
background: var(--gray-2);
color: var(--gray-10);
font-size: 16px;
line-height: 1.5;
}
a {
color: inherit;
text-decoration: none;
}
[x-cloak] {
display: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--gray-12);
}
/* Header */
header {
max-width: 1440px;
margin: auto;
padding: 0 30px;
}
header > div {
display: flex;
justify-content: space-between;
align-items: center;
height: 64px;
}
header nav {
display: flex;
align-items: center;
gap: 26px;
}
header nav a {
font-weight: 500;
color: var(--gray-8);
}
header nav a:hover,
header nav a.current {
color: var(--gray-12);
}
/* Main */
main {
max-width: 1440px;
margin: 0 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: calc(100vh - 65px);
background: #fff;
border: 1px solid var(--gray-3);
}
.hero {
padding: 100px 50px;
max-width: 880px;
}
.hero h1 {
margin-bottom: 15px;
font-size: 52px;
font-weight: 600;
letter-spacing: -1px;
line-height: 1.05;
}
.hero p {
font-size: 22px;
color: var(--gray-7);
}
.hero .button {
margin-top: 30px;
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
padding: 10px 16px;
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0 50px;
border-top: 1px solid var(--gray-3);
}
.cards a {
padding: 30px 40px;
border-right: 1px solid var(--gray-3);
}
.cards a:first-child {
border-left: 1px solid var(--gray-3);
}
.cards a:hover {
background: var(--gray-1);
}
.cards h3 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.4px;
}
.cards p {
color: var(--gray-6);
}
/* Form */
.form-container {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 400px;
margin: auto;
}
.form-container h1 {
font-size: 32px;
letter-spacing: -0.5px;
margin-bottom: 5px;
}
.form-container p {
font-size: 18px;
margin-bottom: 48px;
color: var(--gray-6);
}
form {
display: flex;
flex-direction: column;
gap: 24px;
}
label {
margin-bottom: 4px;
display: block;
font-size: 14px;
font-weight: 500;
}
input,
textarea,
button {
width: 100%;
border-radius: 4px;
font: inherit;
}
input {
height: 40px;
border: 1px solid var(--gray-4);
padding: 0 16px;
}
input[data-invalid='true'],
textarea[data-invalid='true'] {
border-color: #fb2c36;
}
input[data-invalid='true'] + div,
textarea[data-invalid='true'] + div {
color: #fb2c36;
font-size: 14px;
font-weight: 500;
margin-top: 2px;
}
button {
background: var(--gray-12);
color: #fff;
border: none;
padding: 10px;
font-weight: 500;
}
button:hover {
background: var(--gray-10);
}
/* Alerts */
.alert {
background: #fff;
position: relative;
padding: 12px 16px;
font-size: 14px;
min-width: 380px;
font-weight: 500;
border: 1px solid var(--gray-3);
border-radius: 10px;
animation: scale-up 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.alert-destructive {
color: #fb2c36;
background: #fb2c361a;
border-color: #fb2c36;
}
.alert-success {
color: #00a63e;
background: #00a63e1a;
border-color: #00a63e;
}
.flash-container {
position: fixed;
top: 80px;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
}
@keyframes scale-up {
from {
transform: scale(0.7);
}
to {
transform: scale(1);
}
vertical-align: middle;
}
inertia/pages/account/signup.vue
-98
View File
@@ -1,98 +0,0 @@
<script setup lang="ts">
import { Form, Link } from '@adonisjs/inertia/vue'
import { useForm } from '@inertiajs/vue3'
import EmptyLayout from '~/pages/layout/emptyLayout.vue'
defineOptions({ layout: EmptyLayout })
const form = useForm({
fullName: '',
email: '',
password: '',
passwordConfirmation: '',
})
</script>
<template>
<div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gradient-to-br from-gray-100 to-gray-200">
<div class="w-full max-w-md p-6 sm:p-8 bg-white rounded-lg shadow-lg">
<div class="flex flex-col items-center justify-center mb-8">
<h1 class="text-2xl sm:text-3xl font-bold text-gray-800">Create Account</h1>
<p class="text-sm text-gray-600 mt-2">Join PC Creator today</p>
</div>
<Form route="account.signup" #default="{ processing, errors }">
<div class="space-y-4 sm:space-y-6">
<div>
<label class="block">
<span class="text-sm font-medium text-gray-700 mb-2 block">Full Name</span>
<input
v-model="form.fullName"
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
name="fullName"
type="text"
placeholder="Enter your full name"
/>
</label>
</div>
<div>
<label class="block">
<span class="text-sm font-medium text-gray-700 mb-2 block">Email</span>
<input
v-model="form.email"
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
name="email"
type="email"
placeholder="Enter your email"
/>
</label>
</div>
<div>
<label class="block">
<span class="text-sm font-medium text-gray-700 mb-2 block">Password</span>
<input
v-model="form.password"
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
name="password"
type="password"
placeholder="Enter your password"
/>
</label>
</div>
<div>
<label class="block">
<span class="text-sm font-medium text-gray-700 mb-2 block">Confirm Password</span>
<input
v-model="form.passwordConfirmation"
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
name="passwordConfirmation"
type="password"
placeholder="Confirm your password"
/>
</label>
</div>
<button
type="submit"
:disabled="processing"
class="w-full px-3 sm:px-4 py-2 sm:py-3 mt-6 sm:mt-8 text-base font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 transition disabled:opacity-50 disabled:cursor-not-allowed"
>
{{ processing ? 'Creating account...' : 'Sign Up' }}
</button>
<div class="text-center mt-4">
<p class="text-sm text-gray-600">
Already have an account?
<Link route="auth.show_login" class="text-indigo-600 hover:text-indigo-700 font-semibold">
Login
</Link>
</p>
</div>
</div>
</Form>
</div>
</div>
</template>
inertia/pages/auth/login.vue
+8 -13
View File
@@ -5,18 +5,18 @@ import EmptyLayout from '~/pages/layout/emptyLayout.vue'
defineOptions({ layout: EmptyLayout })
const props = defineProps<{ errors?: any[] | any }>()
const props = defineProps<{ errors?: Record<string, string> }>()
const vineErrors = computed(() => {
if (Array.isArray(props.errors)) {
return props.errors as any[]
if (props.errors && !Array.isArray(props.errors)) {
return props.errors
}
return []
return {}
})
const authError = computed(() => {
if (!Array.isArray(props.errors) && props.errors) {
return props.errors as any
if (props.errors && !Array.isArray(props.errors)) {
return props.errors
}
return null
})
@@ -27,13 +27,8 @@ const form = useForm({
})
function getErrorMessage(field: string): string | null {
const error = vineErrors.value.find((error) => error.field === field)
return error ? error.message : null
return vineErrors.value[field] || null
}
console.log(authError)
console.log(vineErrors)
console.log(props)
</script>
<template>
@@ -109,7 +104,7 @@ console.log(props)
<Link
as="button"
class="w-full px-3 sm:px-4 py-2 sm:py-3 mt-3 sm:mt-4 text-base font-semibold text-indigo-600 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500/40 transition"
href="/account/signup"
href="/auth/signup"
type="button"
>
Create an account
inertia/pages/auth/signup.vue
+5 -5
View File
@@ -6,7 +6,7 @@ import EmptyLayout from '~/pages/layout/emptyLayout.vue'
defineOptions({ layout: EmptyLayout })
const form = useForm({
fullName: '',
name: '',
email: '',
password: '',
passwordConfirmation: '',
@@ -21,15 +21,15 @@ const form = useForm({
<p class="text-sm text-gray-600 mt-2">Join PC Creator today</p>
</div>
<Form route="account.signup" #default="{ processing, errors }">
<Form route="new_account.store" #default="{ processing, errors }">
<div class="space-y-4 sm:space-y-6">
<div>
<label class="block">
<span class="text-sm font-medium text-gray-700 mb-2 block">Full Name</span>
<input
v-model="form.fullName"
v-model="form.name"
class="w-full px-3 sm:px-4 py-2 sm:py-3 border-2 border-gray-300 rounded-lg focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/40 transition text-base"
name="fullName"
name="name"
type="text"
placeholder="Enter your full name"
/>
@@ -86,7 +86,7 @@ const form = useForm({
<div class="text-center mt-4">
<p class="text-sm text-gray-600">
Already have an account?
<Link route="auth.show_login" class="text-indigo-600 hover:text-indigo-700 font-semibold">
<Link route="session.create" class="text-indigo-600 hover:text-indigo-700 font-semibold">
Login
</Link>
</p>
inertia/pages/components/create.vue
+9 -10
View File
@@ -2,19 +2,18 @@
import { computed, reactive } from 'vue'
import { Link, useForm } from '@inertiajs/vue3'
const props = defineProps<{ types: any[]; errors?: any[] }>()
const errors = computed(() => props.errors || [])
const props = defineProps<{ types: any[]; errors?: Record<string, string> }>()
const errors = computed(() => props.errors || {})
const form = reactive({
name: '',
price: 0,
type_id: null,
purchase_date: new Date().toISOString().split('T')[0],
typeId: null,
purchaseDate: new Date().toISOString().split('T')[0],
quantity: 1,
})
function getErrorMessage(field: string): string | null {
const error = errors.value.find((error) => error.field === field)
return error ? error.message : null
return errors.value[field] || null
}
function formatDateForMySQL(date: string) {
@@ -60,8 +59,8 @@ function submitForm() {
<div>
<label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
<select
name="type_id"
v-model.number="form.type_id"
name="typeId"
v-model.number="form.typeId"
id="type"
class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring-indigo-500 px-3 py-2 focus:ring-1 border rounded text-gray-700 bg-white"
>
@@ -77,8 +76,8 @@ function submitForm() {
>Purchase Date</label
>
<input
name="purchase_date"
v-model="form.purchase_date"
name="purchaseDate"
v-model="form.purchaseDate"
class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 border rounded text-gray-700 px-3 py-2"
type="date"
/>
inertia/pages/components/edit.vue
+8 -9
View File
@@ -6,23 +6,22 @@ const { props } = usePage<{
component: any
types: any[]
origin: string
errors?: any[]
errors?: Record<string, string>
}>()
const { component, types, origin } = props
const errors = computed(() => props.errors || [])
const errors = computed(() => props.errors || {})
const form = reactive({
id: component.id,
name: component.name,
price: component.price,
type_id: component.type.id,
purchase_date: component.purchaseDate,
typeId: component.type.id,
purchaseDate: component.purchaseDate,
origin: origin,
})
function getErrorMessage(field: string): string | null {
const error = errors.value.find((error) => error.field === field)
return error ? error.message : null
return errors.value[field] || null
}
function formatDateForMySQL(date: string) {
@@ -62,7 +61,7 @@ function formatDateForMySQL(date: string) {
<div>
<label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
<select
v-model="form.type_id"
v-model="form.typeId"
id="type"
class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring-indigo-500 px-3 py-2 focus:ring-1 border rounded text-gray-700 bg-white"
>
@@ -78,8 +77,8 @@ function formatDateForMySQL(date: string) {
>Purchase Date</label
>
<input
name="purchase_date"
v-model="form.purchase_date"
name="purchaseDate"
v-model="form.purchaseDate"
class="w-full mt-2 border-gray-200 focus:border-indigo-600 focus:ring focus:ring-indigo-500/40 border rounded text-gray-700 px-3 py-2"
type="date"
/>
inertia/pages/components/show.vue
+11 -18
View File
@@ -1,9 +1,7 @@
<script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3'
import { Link } from '@inertiajs/vue3'
const { props } = usePage<{ component: any }>()
const { component } = props
const originHeader = { 'X-Inertia-Origin': 'components' }
defineProps<{ component: any }>()
</script>
<template>
@@ -11,29 +9,27 @@ const originHeader = { 'X-Inertia-Origin': 'components' }
<h1 class="text-2xl font-semibold mb-8 text-gray-800">Component Details</h1>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="name">Name</label>
<div class="px-3 py-2 border rounded text-gray-700" id="name">
<label class="block text-gray-700 text-sm font-bold mb-2">Name</label>
<div class="px-3 py-2 border rounded text-gray-700">
{{ component.name }}
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="price">Price</label>
<div class="px-3 py-2 border rounded text-gray-700" id="price">${{ component.price }}</div>
<label class="block text-gray-700 text-sm font-bold mb-2">Price</label>
<div class="px-3 py-2 border rounded text-gray-700">${{ component.price }}</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="type">Type</label>
<div class="px-3 py-2 border rounded text-gray-700" id="type">
{{ component.type.name }}
<label class="block text-gray-700 text-sm font-bold mb-2">Type</label>
<div class="px-3 py-2 border rounded text-gray-700">
{{ component.type?.name ?? 'N/A' }}
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="purchaseDate"
>Purchase Date</label
>
<div class="px-3 py-2 border rounded text-gray-700" id="purchaseDate">
<label class="block text-gray-700 text-sm font-bold mb-2">Purchase Date</label>
<div class="px-3 py-2 border rounded text-gray-700">
{{ component.purchaseDate }}
</div>
</div>
@@ -43,11 +39,8 @@ const originHeader = { 'X-Inertia-Origin': 'components' }
type="button"
as="button"
class="w-full md:w-auto px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition text-center"
:headers="originHeader"
>
Edit
</Link>
</div>
</template>
<style scoped></style>
inertia/pages/computers/create.vue
+3 -4
View File
@@ -5,10 +5,10 @@ import { Link, usePage } from '@inertiajs/vue3'
const { props } = usePage<{
components: any[]
states: any[]
errors: any[]
errors: Record<string, string>
}>()
const { components, states } = props
const errors = computed(() => props.errors || [])
const errors = computed(() => props.errors || {})
const componentTypeOrder = [
'Processor',
@@ -49,8 +49,7 @@ const form = reactive({
})
function getErrorMessage(field: string): string | null {
const error = errors.value.find((error) => error.field === field)
return error ? error.message : null
return errors.value[field] || null
}
</script>
inertia/pages/computers/edit.vue
+3 -4
View File
@@ -6,10 +6,10 @@ const { props } = usePage<{
computer: any
availableComponents: any[]
states: any[]
errors?: any[]
errors?: Record<string, string>
}>()
const { computer, availableComponents, states } = props
const errors = computed(() => props.errors || [])
const errors = computed(() => props.errors || {})
const form = reactive({
id: computer.id,
@@ -31,8 +31,7 @@ function deleteComputer(id: number) {
}
function getErrorMessage(field: string): string | null {
const error = errors.value.find((error) => error.field === field)
return error ? error.message : null
return errors.value[field] || null
}
</script>
inertia/pages/computers/index.vue
+1 -1
View File
@@ -13,7 +13,7 @@ defineProps<{ computers: any[] }>()
href="/computers/create"
type="button"
as="button"
class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition"
class="inline-flex shrink-0 px-4 py-2 bg-indigo-600 text-white rounded hover:bg-blue-700 transition"
>
Add
</Link>
inertia/pages/layout/defaultLayout.vue
+7 -5
View File
@@ -4,14 +4,16 @@ import Header from './header.vue'
</script>
<template>
<div class="flex h-screen bg-gray-200 font-roboto">
<Sidebar />
<div class="flex h-screen bg-background font-body-md text-on-background overflow-hidden">
<aside class="w-64 shrink-0">
<Sidebar />
</aside>
<div class="flex-1 flex flex-col overflow-hidden">
<div class="flex-1 flex flex-col min-w-0">
<Header />
<main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-200">
<div class="container mx-auto px-6 py-8">
<main class="flex-1 pt-16 min-h-screen border-0 overflow-auto">
<div class="p-10 max-w-[1400px] mx-auto">
<slot />
</div>
</main>
inertia/pages/layout/header.vue
+60 -71
View File
@@ -3,15 +3,9 @@ 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()
@@ -22,78 +16,73 @@ const user = computed(() => {
</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>
<header
class="flex justify-between items-center px-10 h-16 bg-white ml-64 w-[calc(100%-16rem)] fixed top-0 right-0 z-40 border-b border-outline-variant shadow-sm"
>
<div
class="flex items-center gap-4 bg-surface-container-low px-4 py-2 rounded-lg border border-outline-variant w-96 focus-within:ring-2 focus-within:ring-primary transition-all"
>
<span class="material-symbols-outlined text-on-surface-variant">search</span>
<input
class="bg-transparent border-none focus:ring-0 focus:outline-none text-body-sm font-body-sm w-full p-0"
placeholder="Search builds..."
type="text"
/>
</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 class="flex items-center gap-6">
<button class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="text-on-surface-variant hover:bg-surface-container-low p-2 rounded-full transition-all">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="h-8 w-px bg-outline-variant mx-2"></div>
<div class="relative flex items-center gap-3 cursor-pointer group" @click="dropdownOpen = !dropdownOpen">
<div class="text-right hidden sm:block">
<p class="font-label-md text-label-md text-on-surface">{{ user.name }}</p>
</div>
<img
class="w-10 h-10 rounded-full border-2 border-primary-container group-hover:border-primary transition-all object-cover"
:src="userProfileIcon"
alt="Avatar"
/>
</div>
<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="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"
class="absolute top-14 right-0 z-50 min-w-48 max-w-72 bg-white rounded-lg shadow-xl border border-outline-variant overflow-hidden"
>
<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 class="px-4 py-3 border-b border-outline-variant">
<p class="font-label-md text-label-md text-on-surface truncate">{{ user.name }}</p>
<p class="font-label-sm text-label-sm text-on-surface-variant truncate">{{ user.email }}</p>
</div>
</transition>
</div>
<Link
href="/auth/logout"
class="flex items-center gap-3 px-4 py-2 text-body-sm font-body-sm text-on-surface hover:bg-surface-container-low transition-colors"
>
<span class="material-symbols-outlined text-[20px]">logout</span>
Sign Out
</Link>
</div>
</transition>
</div>
</header>
<div
v-show="dropdownOpen"
class="fixed inset-0 z-30"
@click="dropdownOpen = false"
/>
</template>
inertia/pages/layout/sidebar.vue
+2 -2
View File
@@ -14,7 +14,7 @@ console.log(route)
</script>
<template>
<div class="flex">
<div class="flex h-full">
<!-- Backdrop -->
<div
:class="isOpen ? 'block' : 'hidden'"
@@ -25,7 +25,7 @@ console.log(route)
<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"
class="fixed inset-y-0 left-0 z-30 w-64 overflow-y-auto transition duration-300 transform bg-gray-900 lg:h-full lg:translate-x-0 lg:static lg:inset-0"
>
<div class="flex items-center justify-center mt-8">
<div class="flex items-center">
inertia/pages/widgets/ComponentEditor.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, defineEmits, defineProps, onMounted, ref, watch } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { Component } from '~/pages/types/UITypes'
interface ComponentsByType {
inertia/pages/widgets/DeleteConfirmationModal.vue
-2
View File
@@ -1,6 +1,4 @@
<script setup lang="ts">
import { defineEmits, defineProps } from 'vue'
defineProps<{ show: boolean }>()
const emit = defineEmits(['confirm', 'cancel'])