initial commit

resources/js/Components/Admin/Sort.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { Link } from '@inertiajs/vue3';
+import { stardust } from '@eidellev/adonis-stardust/client';
+
+const props = defineProps({
+	label: {
+		type: String,
+		default: '',
+	},
+	attribute: {
+		type: String,
+		default: '',
+	},
+	search: {
+		type: String,
+		default: '',
+	},
+});
+
+const downFill = ref('lightgray');
+const upFill = ref('lightgray');
+
+const sortLink = computed(() => {
+	let url = new URL(document.location);
+	let sortValue = url.searchParams.get('sort');
+
+	if (sortValue == props.attribute) {
+		url.searchParams.set('sort', '-' + props.attribute);
+		upFill.value = 'black';
+	} else if (sortValue === '-' + props.attribute) {
+		url.searchParams.set('sort', props.attribute);
+		downFill.value = 'black';
+	} else {
+		url.searchParams.set('sort', props.attribute);
+	}
+
+	if (props.search == '') {
+		url.searchParams.delete('search');
+	} else {
+		url.searchParams.set('search', props.search);
+	}
+
+	return url.href;
+});
+</script>
+
+<template>
+	<div class="flex items-center gap-4">
+		<Link :href="sortLink" class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">
+			{{ label }}
+		</Link>
+		<div class="flex flex-col">
+			<svg
+				class="inline-block"
+				xmlns="http://www.w3.org/2000/svg"
+				width="15px"
+				height="15px"
+				viewBox="0 0 15 15"
+				fill="none"
+			>
+				<path d="M7.5 3L15 11H0L7.5 3Z" :fill="upFill" />
+			</svg>
+			<svg
+				class="inline-block"
+				xmlns="http://www.w3.org/2000/svg"
+				width="15px"
+				height="15px"
+				viewBox="0 0 15 15"
+				fill="none"
+			>
+				<path d="M7.49988 12L-0.00012207 4L14.9999 4L7.49988 12Z" :fill="downFill" />
+			</svg>
+		</div>
+	</div>
+</template>