Add BackButton component

resources/js/app.js

@@ -15,6 +15,7 @@ import MobileFilterDialog from './components/search/MobileFilterDialog.vue';
 import SearchMap from './components/search/Map.vue';
 import ArtworkCarousel from './components/ArtworkCarousel.vue';
 import FilterSearch from './components/search/FilterSearch.vue';
+import BackButton from './components/BackButton.vue';
 
 const app = createApp({});
 app.component('headless.popover-group', PopoverGroup);
@@ -31,5 +32,6 @@ app.component('search.disclosure-filter', DisclosureFilter);
 app.component('search.filter-search', FilterSearch);
 app.component('search.artworks-query-observer', ArtworksQueryObserver);
 app.component('artwork-carousel', ArtworkCarousel);
+app.component('back-button', BackButton);
 
 app.mount('#app');

resources/js/components/BackButton.vue

@@ -0,0 +1,19 @@
+<template>
+    <button @click="onClick">
+        <slot />
+    </button>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+const props = defineProps(['fallback']);
+
+const onClick = () => {
+    if (document.referrer.startsWith(window.location.origin)) {
+        window.history.back();
+    } else {
+        window.location = props.fallback;
+    }
+};
+</script>

resources/views/artworks/show.blade.php

@@ -10,13 +10,13 @@
 
 @section('content')
     <div class="mx-auto w-full max-w-screen-3xl px-4 lg:px-14">
-        <a href="{{ route('artworks.index') }}"
+        <back-button fallback="{{ route('artworks.index') }}"
             class="mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-white stroke-neutral-800 stroke-2">
             <svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M20.25 8.99902H1.75" />
                 <path d="M9.15039 16.3996L1.75039 8.99961L9.15039 1.59961" />
             </svg>
-        </a>
+        </back-button>
     </div>
     <div class="mx-auto max-w-5xl bg-neutral-100 p-4 pt-0 lg:pb-0">
         <artwork-carousel :photos="{{ Js::from($artwork->photoMediaForCarousel) }}">