Merge pull request #139 from NIAEFEUP/feature/contacts

Feature/contacts

src/lib/components/icons/icons.ts

@@ -8,6 +8,7 @@ import {
   FaSolidBars,
   FaSolidGlobe
 } from 'svelte-icons-pack/fa';
+import { BiMap } from 'svelte-icons-pack/bi';
 import { IoMail, IoClose, IoEye, IoEyeOff } from 'svelte-icons-pack/io';
 
 const Icons = {
@@ -21,6 +22,7 @@ const Icons = {
   Bars: FaSolidBars,
   Close: IoClose,
   Globe: FaSolidGlobe,
+  Pin: BiMap,
   Visible: IoEye,
   Hidden: IoEyeOff
 };

src/lib/components/icons/label-input.stories.ts

@@ -0,0 +1,34 @@
+import LabelInput from './label-input.svelte';
+
+export default {
+  title: 'Atoms/LabelInput',
+  component: LabelInput,
+  argTypes: {
+    label: { control: 'text' },
+    placeholder: { control: 'text' },
+    isTextArea: { control: 'boolean' }
+  },
+  parameters: {
+    layout: 'centered',
+    controls: {
+      exclude: ['id', 'type']
+    }
+  }
+};
+
+export const NonTextAreaInput = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    type: 'text'
+  }
+};
+
+export const TextAreaInput = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    type: 'text',
+    isTextArea: true
+  }
+};

src/lib/components/icons/label-input.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let label = '';
+  export let id = '';
+  export let type = 'text';
+  export let placeholder = '';
+  export let isTextArea = false;
+</script>
+
+<label class="m-1 font-source_code font-bold text-white" for={id}>{label}</label><br class="mb-1" />
+{#if isTextArea}
+  <textarea
+    aria-label="textarea-input"
+    class="mb-2 min-h-[100px] w-full rounded-lg bg-white p-2 font-source_code text-primary placeholder-primary"
+    {id}
+    {placeholder}
+    rows="4"
+  /><br />
+{:else}
+  <input
+    aria-label="text-input"
+    class="mb-2 w-full rounded-lg bg-white p-2 text-primary placeholder-primary"
+    {type}
+    {id}
+    {placeholder}
+  /><br />
+{/if}

src/lib/utils.ts

@@ -2,7 +2,12 @@ import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cubicOut } from 'svelte/easing';
 import type { TransitionConfig } from 'svelte/transition';
+import { createNotification } from '@/routes/(app)/_components/layout/notifications';
 
+export function copyToClipboard(content: string) {
+  navigator.clipboard.writeText(content);
+  createNotification('O email foi copiado para o teu clipboard :)');
+}
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }

src/routes/(app)/_components/layout/navbar.svelte

@@ -1,5 +1,5 @@
 <nav
-  class="hidden h-min w-full grid-cols-2 items-center justify-center px-7 py-2 font-raleway text-xs text-white sm:grid sm:text-base"
+  class="fixed hidden h-min w-full grid-cols-2 items-center justify-center px-7 py-2 font-raleway text-xs text-white sm:grid sm:text-base"
   aria-label="Navigation Bar"
 >
   <div class="flex w-full justify-start">
@@ -12,6 +12,6 @@
     <a href="#/">Equipa</a>
     <a href="#/">Projetos</a>
     <a href="#/">Eventos</a>
-    <a href="#/">Contactos</a>
+    <a href="/contacts">Contactos</a>
   </div>
 </nav>

src/routes/(app)/contacts/+page.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { Icon } from 'svelte-icons-pack';
+  import Graph from './_components/graph.svelte';
+  import LabelInput from '@/lib/components/icons/label-input.svelte';
+  import Icons from '$lib/components/icons/icons';
+</script>
+
+<section class="-10 my-20 flex flex-col justify-center">
+  <section class="mb-4 flex flex-col text-center font-raleway text-white">
+    <h1 class="text-2xl font-bold">&lt; Contacta-nos /&gt;</h1>
+  </section>
+  <div class="mx-10 grid-cols-2 md:grid">
+    <form class="min-w-[85%] justify-self-end">
+      <LabelInput label="// Email" id="email" type="email" placeholder="[email protected]" />
+      <LabelInput label="// Nome" id="name" type="text" />
+      <LabelInput label="// Assunto" id="subject" type="text" />
+      <LabelInput label="// Mensagem" id="message" type="text" isTextArea={true} />
+
+      <button
+        class="m-1 justify-self-start rounded-lg bg-vivid-red-900 px-5 py-1 text-white"
+        type="submit">Enviar</button
+      >
+    </form>
+    <div class="m-2 flex w-full justify-center md:m-5 md:my-0">
+      <Graph />
+    </div>
+  </div>
+  <picture>
+    <source media="(max-width: 767px)" srcset="/images/feup_buildings.svg" />
+    <source media="(min-width: 767px)" srcset="/images/feup_buildings_md.svg" />
+    <img
+      src="/images/feup_buildings.svg"
+      alt="Feup Buildings Outline"
+      class="align-center h-52 w-full justify-self-center object-none object-center"
+    />
+  </picture>
+  <span
+    id="location"
+    class="ml-3 flex justify-center overflow-x-hidden text-white md:justify-start md:self-center lg:w-[1039px]"
+  >
+    <Icon src={Icons.Pin} color="white" size="40" className="py-2 pl-1" />
+    <div>
+      <p>Rua Dr. Roberto Frias 4200-465, Porto</p>
+      <p>Sala B315</p>
+    </div>
+  </span>
+</section>

src/routes/(app)/contacts/_components/graph.stories.ts

@@ -0,0 +1,11 @@
+import Graph from './graph.svelte';
+
+export default {
+  title: 'Organisms/Graph',
+  component: Graph,
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export const Default = {};

src/routes/(app)/contacts/_components/graph.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import Icon from '@/lib/components/icons/icon.svelte';
+  import Icons from '$lib/components/icons/icons';
+  import { copyToClipboard } from '$lib/utils';
+
+  const coords = [
+    [1, 1],
+    [6, 3],
+    [2, 5],
+    [10, 6],
+    [1, 8],
+    [7, 8]
+  ];
+  const lines = [
+    [0, 2],
+    [2, 1],
+    [1, 5],
+    [5, 3],
+    [2, 4]
+  ];
+  let innerWidth = 0;
+  let coefficient = 8;
+  let iconSize = 8;
+
+  const socials = [
+    { url: 'https://www.instagram.com/niaefeup/', icon: Icons.Instagram, label: 'Instagram' },
+    { url: 'https://github.com/NIAEFEUP', icon: Icons.Github, label: 'Github' },
+    { url: 'https://www.facebook.com/NIAEFEUP', icon: Icons.Facebook, label: 'Facebook' },
+    { url: '[email protected]', icon: Icons.Mail, label: 'Email' },
+    { url: 'https://www.linkedin.com/company/nifeup', icon: Icons.Linkedin, label: 'Linkedin' },
+    { url: 'https://twitter.com/niaefeup', icon: Icons.Twitter, label: 'Twitter' }
+  ];
+</script>
+
+<svelte:window bind:innerWidth />
+
+<svg style="height: 40dvh; min-width: 35dvw" viewBox="0 0 87 80" xmlns="http://www.w3.org/2000/svg">
+  <!-- Draw graph edges. -->
+  {#each lines as line}
+    <line
+      x1={coords[line[0]][0] * coefficient}
+      y1={coords[line[0]][1] * coefficient}
+      x2={coords[line[1]][0] * coefficient}
+      y2={coords[line[1]][1] * coefficient}
+      class="stroke-vivid-red-900"
+    />
+  {/each}
+
+  <!-- Draw graph nodes. -->
+  {#each coords as coord, index}
+    <foreignObject
+      x={coord[0] * coefficient - (iconSize + 2) / 2}
+      y={coord[1] * coefficient - (iconSize + 2) / 2}
+      width={iconSize + 2}
+      height={iconSize + 2}
+    >
+      {#if socials[index].url.startsWith('https')}
+        <div class="flex h-full w-full items-center justify-center rounded bg-white bg-opacity-30">
+          <Icon
+            src={socials[index].icon}
+            color="white"
+            size="{iconSize.toString()}px"
+            href={socials[index].url}
+            ariaLabel={socials[index].label}
+          />
+        </div>
+      {:else}
+        <div
+          class="flex h-full w-full items-center justify-center rounded bg-white bg-opacity-30"
+          on:click={() => copyToClipboard(socials[index].url)}
+          on:keydown={() => copyToClipboard(socials[index].url)}
+          role="button"
+          tabindex="0"
+          aria-label="copy-mail"
+        >
+          <Icon src={socials[index].icon} color="white" size="{iconSize.toString()}px" />
+        </div>
+      {/if}
+    </foreignObject>
+  {/each}
+</svg>

src/routes/(app)/contacts/page.stories.ts

@@ -0,0 +1,15 @@
+import { Layout } from 'lucide-svelte';
+import Page from './+page.svelte';
+import LayoutDecorator from '$lib/storybook-utils/layout-decorator.svelte';
+
+export default {
+  title: 'Pages/Contacts',
+  component: Page,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: { default: 'clear' }
+  },
+  decorators: [() => Layout, () => LayoutDecorator]
+};
+
+export const Contacts = {};