add parent navigation

frontend/rabbi_gerzi/src/components/ElementParentLink.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ArrowUp as ArrowUpIcon } from 'lucide-vue-next'
+import type { ChildElement } from '@/stores/elements'
+
+type ElementRouteName = 'element' | 'admin-element'
+
+interface Props {
+  dataCy: string
+  parentElement: ChildElement
+  routeName: ElementRouteName
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <RouterLink
+    :to="{
+      name: routeName,
+      params: { id: parentElement.id },
+    }"
+    class="element-parent-link"
+    :data-cy="dataCy"
+  >
+    <ArrowUpIcon :size="16" aria-hidden="true" />
+    <span>Parent: {{ parentElement.title }}</span>
+  </RouterLink>
+</template>
+
+<style scoped>
+.element-parent-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 2.2rem;
+  padding: 0.35rem 0;
+  color: var(--color-slate);
+  font-family: var(--font-sans);
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1.25;
+  text-decoration: none;
+}
+
+.element-parent-link:hover,
+.element-parent-link:focus-visible {
+  color: var(--color-text);
+  text-decoration: underline;
+  text-underline-offset: 0.18em;
+}
+
+.element-parent-link:focus-visible {
+  border-radius: 4px;
+  outline: 3px solid rgb(61 78 93 / 24%);
+  outline-offset: 3px;
+}
+</style>