Add basic relations view

lib/src/Components/Profile/Subcomponents/RelationsView.tsx

@@ -0,0 +1,37 @@
+import { useItems } from '#components/Map/hooks/useItems'
+
+import type { Item } from '#types/Item'
+
+interface Props {
+  item: Item
+  relation: string
+}
+
+export const RelationsView = ({ item, relation }: Props) => {
+  const items = useItems()
+
+  if (!item.relations) throw new Error('Item does not have relations defined.')
+
+  const relationsOfRightType = item.relations.filter((r) => r.type === relation)
+
+  const relatedItems = items.filter((i) => relationsOfRightType.some((r) => r.id === i.id))
+
+  const hasRelatedItems = relatedItems.length > 0
+
+  return (
+    <div>
+      <h2>{relation}</h2>
+      {hasRelatedItems ? (
+        <ul>
+          {relatedItems.map((relatedItem) => (
+            <li key={relatedItem.id}>
+              <a href={`/item/${relatedItem.id}`}>{relatedItem.name}</a>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p>No related items found.</p>
+      )}
+    </div>
+  )
+}

lib/src/Components/Profile/Templates/FlexView.tsx

@@ -7,6 +7,7 @@ import { GroupSubHeaderView } from '#components/Profile/Subcomponents/GroupSubHe
 import { InviteLinkView } from '#components/Profile/Subcomponents/InviteLinkView'
 import { ProfileStartEndView } from '#components/Profile/Subcomponents/ProfileStartEndView'
 import { ProfileTextView } from '#components/Profile/Subcomponents/ProfileTextView'
+import { RelationsView } from '#components/Profile/Subcomponents/RelationsView'
 
 import type { Item } from '#types/Item'
 import type { Key } from 'react'
@@ -19,6 +20,7 @@ const componentMap = {
   gallery: GalleryView,
   crowdfundings: CrowdfundingView,
   inviteLinks: InviteLinkView,
+  relations: RelationsView,
   // weitere Komponenten hier
 }