Refactor Order Success Page to improve icon usage and code consistency
- Imported HouseIcon and HandbagIcon from 'lucide-vue-next' for better visual representation. - Simplified SVG elements by removing unnecessary line breaks and ensuring consistent formatting. - Enhanced loading and success states with improved icon integration for a more cohesive user experience.
This commit is contained in:
@@ -1,4 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { HouseIcon, HandbagIcon } from 'lucide-vue-next'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Order Success Page (/order/success/[orderId])
|
* Order Success Page (/order/success/[orderId])
|
||||||
*
|
*
|
||||||
@@ -92,9 +94,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
<!-- Loading State -->
|
<!-- Loading State -->
|
||||||
<div v-if="isLoading" class="text-center py-12">
|
<div v-if="isLoading" class="text-center py-12">
|
||||||
<div
|
<div class="animate-spin rounded-full h-12 w-12 border-4 border-white/20 border-t-white mx-auto mb-4" />
|
||||||
class="animate-spin rounded-full h-12 w-12 border-4 border-white/20 border-t-white mx-auto mb-4"
|
|
||||||
/>
|
|
||||||
<p class="text-white/60">Lade Bestellung...</p>
|
<p class="text-white/60">Lade Bestellung...</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -104,22 +104,10 @@ onMounted(() => {
|
|||||||
<div class="text-center space-y-4 py-8">
|
<div class="text-center space-y-4 py-8">
|
||||||
<!-- Success Icon (animated checkmark) -->
|
<!-- Success Icon (animated checkmark) -->
|
||||||
<div class="flex justify-center mb-6">
|
<div class="flex justify-center mb-6">
|
||||||
<div
|
<div class="rounded-full bg-green-500/20 p-6 border-4 border-green-500/50 animate-pulse">
|
||||||
class="rounded-full bg-green-500/20 p-6 border-4 border-green-500/50 animate-pulse"
|
<svg class="w-16 h-16 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||||
>
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
<svg
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||||
class="w-16 h-16 text-green-500"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M5 13l4 4L19 7"
|
|
||||||
></path>
|
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -142,19 +130,10 @@ onMounted(() => {
|
|||||||
<!-- Next Steps Info -->
|
<!-- Next Steps Info -->
|
||||||
<Alert class="border-blue-500/50 bg-blue-500/10">
|
<Alert class="border-blue-500/50 bg-blue-500/10">
|
||||||
<div class="flex items-start gap-3">
|
<div class="flex items-start gap-3">
|
||||||
<svg
|
<svg class="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor"
|
||||||
class="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0"
|
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
fill="none"
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
stroke="currentColor"
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
</svg>
|
||||||
<div>
|
<div>
|
||||||
<AlertTitle class="text-blue-400">Wie geht es weiter?</AlertTitle>
|
<AlertTitle class="text-blue-400">Wie geht es weiter?</AlertTitle>
|
||||||
@@ -181,40 +160,14 @@ onMounted(() => {
|
|||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<NuxtLink to="/" class="w-full">
|
<NuxtLink to="/" class="w-full">
|
||||||
<Button variant="secondary" size="experimenta" class="w-full">
|
<Button variant="secondary" size="experimenta" class="w-full">
|
||||||
<svg
|
<HouseIcon class="w-5 h-5 mr-2" />
|
||||||
class="w-5 h-5 mr-2"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
Zurück zur Startseite
|
Zurück zur Startseite
|
||||||
</Button>
|
</Button>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
||||||
<NuxtLink to="/experimenta" class="w-full">
|
<NuxtLink to="/experimenta" class="w-full">
|
||||||
<Button variant="experimenta" size="experimenta" class="w-full">
|
<Button variant="experimenta" size="experimenta" class="w-full">
|
||||||
<svg
|
<HandbagIcon class="w-5 h-5 mr-2" />
|
||||||
class="w-5 h-5 mr-2"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
Weitere Produkte kaufen
|
Weitere Produkte kaufen
|
||||||
</Button>
|
</Button>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
@@ -225,10 +178,7 @@ onMounted(() => {
|
|||||||
<p class="text-sm text-white/60">
|
<p class="text-sm text-white/60">
|
||||||
Fragen zu deiner Bestellung? Kontaktiere uns gerne:
|
Fragen zu deiner Bestellung? Kontaktiere uns gerne:
|
||||||
</p>
|
</p>
|
||||||
<a
|
<a href="mailto:info@experimenta.science" class="text-sm text-experimenta-accent hover:underline">
|
||||||
href="mailto:info@experimenta.science"
|
|
||||||
class="text-sm text-experimenta-accent hover:underline"
|
|
||||||
>
|
|
||||||
info@experimenta.science
|
info@experimenta.science
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user