[#131] add new event link to the preview-card head

src/shared/ui/icon-svg/icon-svg.vue

@@ -609,6 +609,27 @@ defineProps<Props>();
  <path d="M12 17v-6" />
  <path d="M9.5 14.5l2.5 2.5l2.5 -2.5" />
  </svg>
+
+ <svg
+ v-else-if="name === 'window-maximize'"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ class="icon icon-tabler icons-tabler-outline icon-tabler-window-maximize"
+ >
+ <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+ <path
+ d="M3 16m0 1a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1z"
+ />
+ <path d="M4 12v-6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-6" />
+ <path d="M12 8h4v4" />
+ <path d="M16 8l-5 5" />
+ </svg>
  </div>
 </template>
 

src/shared/ui/preview-card/preview-card-header.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from "vue";
-import type { EventType } from "../../types";
+import { EVENT_TYPES, type EventType } from "../../types";
 import { IconSvg } from "../icon-svg";
 import { DownloadType } from "./types";
 
@@ -54,6 +54,12 @@ const lockEvent = () => {
 };
 
 const isVisibleTags = computed(() => props.tags.length > 0);
+
+const newPageLink = computed(() => {
+ if (!Object.values(EVENT_TYPES).includes(props.eventType)) return "";
+
+ return `/${props.eventType}/${props.eventId}`;
+});
 </script>
 
 <template>
@@ -80,6 +86,16 @@ const isVisibleTags = computed(() => props.tags.length > 0);
  {{ tag }}
  </div>
  </template>
+
+ <template v-if="newPageLink">
+ <NuxtLink
+ :to="newPageLink"
+ class="preview-card-header__open"
+ title="Open event in the new window"
+ >
+ <IconSvg name="window-maximize" />
+ </NuxtLink>
+ </template>
  </div>
 
  <div v-if="isVisibleControls" class="preview-card-header__buttons">
@@ -216,6 +232,11 @@ $eventTypeColorsMap: (
  }
 }
 
+.preview-card-header__open {
+ @apply flex justify-end;
+ @apply h-4 md:h-5;
+}
+
 .preview-card-header__buttons {
  @apply flex justify-end;
  @apply gap-2 md:gap-3;