soeren/ai-stylegallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finished the upgrade to filament 4. completely revamped the frontend with codex, now it looks great!

Browse Source
This commit is contained in:
SEB Fotografie - soeren
2025-11-13 17:42:43 +01:00
parent f59fda588b
commit b311188bc1
138 changed files with 5440 additions and 4105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
resources/js/Components/Navigation.vue
View File

@@ -1,8 +1,37 @@
<template>
<nav class="navigation">
<button @click="$emit('prevPage')" :disabled="currentPage === 1">{{ __('navigation.previous') }}</button>
<span>{{ __('navigation.page_of', { currentPage: currentPage, totalPages: totalPages }) }}</span>
<button @click="$emit('nextPage')" :disabled="currentPage === totalPages">{{ __('navigation.next') }}</button>
<nav class="rounded-3xl border border-white/10 bg-white/5 p-5 text-white shadow-2xl backdrop-blur">
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-2 text-xs uppercase tracking-[0.4em] text-slate-300">
Seite
<span class="text-xl font-semibold text-white">{{ currentPage }}</span>
<span class="text-slate-500">/</span>
<span class="text-lg text-slate-200">{{ totalPages }}</span>
</div>
<div class="flex flex-wrap items-center gap-3">
<button
type="button"
class="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-2 text-sm font-semibold text-white transition hover:border-cyan-300 hover:text-cyan-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300 disabled:opacity-50"
@click="$emit('prevPage')"
:disabled="currentPage === 1"
>
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
</svg>
{{ __('navigation.previous') }}
</button>
<button
type="button"
class="inline-flex items-center gap-2 rounded-full border border-emerald-300 bg-emerald-400/20 px-4 py-2 text-sm font-semibold text-emerald-100 transition hover:bg-emerald-400/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-300 disabled:opacity-50"
@click="$emit('nextPage')"
:disabled="currentPage === totalPages"
>
{{ __('navigation.next') }}
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</button>
</div>
</div>
</nav>
</template>
@@ -20,38 +49,3 @@ const props = defineProps({
const emits = defineEmits(['prevPage', 'nextPage']);
</script>
<style scoped>
.navigation {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
background-color: var(--color-background);
width: 100%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: var(--color-text);
}
.navigation button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}
.navigation button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.navigation span {
font-size: 1.2em;
font-weight: bold;
color: var(--color-text);
}
</style>