made contacts page

components/contact/ContactInformation.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="$style.grid">
+    <ContactRow value="@vv4000" href="https://t.me/vv4000" label="Telegram">
+      <IconsTelegram :width="24" :height="24" />
+    </ContactRow>
+
+    <ContactRow
+      :value="`@${contacts.github}`"
+      :href="`https://github.com/${contacts.github}`"
+      label="Github"
+    >
+      <IconsGithub :width="24" :height="24" />
+    </ContactRow>
+
+    <ContactRow :value="mail" :href="`mailto:${mail}`" label="Mail">
+      <IconsSend :width="24" :height="24" />
+    </ContactRow>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { contacts } from "~~/constants/contacts";
+
+const mail = ref("...loading");
+
+onMounted(() => (mail.value = atob(contacts.email)));
+</script>
+
+<style lang="scss" module>
+.grid {
+  width: auto;
+  display: grid;
+  grid-auto-flow: row;
+  gap: 16px;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+</style>

components/contact/ContactRow.vue

@@ -0,0 +1,55 @@
+<template>
+  <UiCard :class="$style.row" @click="openWindow">
+    <div :class="$style.grid">
+      <div :class="$style.icon"><slot /></div>
+      <div :class="$style.text">
+        <div :class="$style.label">{{ label }}</div>
+        <NuxtLink :to="href" target="_blank" :class="$style.link">
+          {{ value }}
+        </NuxtLink>
+      </div>
+    </div>
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  value: string;
+  href: string;
+  label: string;
+}
+
+const props = defineProps<Props>();
+
+const openWindow = () => window.open(props.href);
+</script>
+
+<style lang="scss" module>
+.row {
+  cursor: pointer;
+  padding: 10px 20px 10px 14px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  align-items: center;
+  gap: 16px;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.label {
+  font-size: 0.8em;
+  color: var(--color-text);
+  margin-bottom: 2px;
+}
+</style>