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 } from 'svelte-icons-pack/io';
 
 const Icons = {
@@ -20,7 +21,8 @@ const Icons = {
   User: FaSolidUser,
   Bars: FaSolidBars,
   Close: IoClose,
-  Globe: FaSolidGlobe
+  Globe: FaSolidGlobe,
+  Pin: BiMap
 };
 
 export default Icons;

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,25 @@
+<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 w-full rounded-lg p-2 font-source_code text-primary placeholder-primary"
+    {id}
+    rows="4"
+  /><br />
+{:else}
+  <input
+    aria-label="text-input"
+    class="mb-2 w-full rounded-lg 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)/(home)/page.stories.ts

@@ -6,7 +6,8 @@ export default {
   title: 'Pages/HomePage',
   component: Page,
   parameters: {
-    layout: 'fullscreen'
+    layout: 'fullscreen',
+    backgrounds: { default: 'clear' }
   },
   decorators: [() => Layout, () => LayoutDecorator]
 };

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

@@ -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 = {};