EventHexagon component

codecov.yaml

@@ -5,3 +5,7 @@ coverage:
       default:
         target: 80%
         threshold: 5%
+    patch:
+      default:
+        target: 80%
+        threshold: 5%

src/lib/components/hexagons/hexagon-grid.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type EventHexagon from './EventHexagon.svelte';
   import type TeamMemberHexagon from '@/routes/(app)/team/_components/team-member-hexagon.svelte';
 
   // Inspired by https://github.com/sveltejs/svelte-virtual-list/blob/master/VirtualList.svelte
@@ -9,7 +10,7 @@
 
   export let gap: 'small' | 'medium' | 'big' = 'medium';
   export let orientation: 'horizontal' | 'vertical';
-  export let component: typeof TeamMemberHexagon;
+  export let component: typeof TeamMemberHexagon | typeof EventHexagon;
 
   const gridColumnsStyle =
     orientation === 'horizontal'

src/routes/(app)/events/_components/event-hexagon.stories.ts

@@ -0,0 +1,77 @@
+import EventHexagon from './event-hexagon.svelte';
+
+export default {
+  title: 'Atoms/Hexagons/Event Hexagon',
+  component: EventHexagon,
+  parameters: {
+    layout: 'centered',
+    controls: { exclude: ['orientation', 'event'] }
+  }
+};
+
+export const DateIntervalHexagon = {
+  args: {
+    title: { control: 'text' },
+    data: {
+      title: 'Jantar de Curso',
+      description: 'Muito fixe',
+      teamMemberIds: [],
+      registerUrl: 'https://www.google.com/intl/pt-PT/forms/about/',
+      dateInterval: { startDate: new Date('2023-12-10'), endDate: new Date('2024-01-01') },
+      location: 'Cervejaria Diu',
+      thumbnailPath: 'images/previews/evento.png'
+    }
+  }
+};
+
+export const SingleDateHexagon = {
+  args: {
+    data: {
+      title: 'Jantar de Curso',
+      description: 'Muito fixe',
+      teamMemberIds: [],
+      registerUrl: 'https://www.google.com/intl/pt-PT/forms/about/',
+      dateInterval: { startDate: new Date('2023-12-10') },
+      location: 'Cervejaria Diu',
+      thumbnailPath: 'images/previews/evento.png'
+    }
+  }
+};
+
+export const HoveredHexagon = {
+  args: {
+    title: { control: 'text' },
+    data: {
+      title: 'Jantar de Curso',
+      description: 'Muito fixe',
+      teamMemberIds: [],
+      registerUrl: 'https://www.google.com/intl/pt-PT/forms/about/',
+      dateInterval: { startDate: new Date('2023-12-10'), endDate: new Date('2024-01-01') },
+      location: 'Cervejaria Diu',
+      thumbnailPath: 'images/previews/evento.png'
+    }
+  },
+  parameters: {
+    pseudo: { hover: true }
+  }
+};
+
+export const MobileHexagon = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile2'
+    }
+  },
+  args: {
+    title: { control: 'text' },
+    data: {
+      title: 'Jantar de Curso',
+      description: 'Muito fixe',
+      teamMemberIds: [],
+      registerUrl: 'https://www.google.com/intl/pt-PT/forms/about/',
+      dateInterval: { startDate: new Date('2023-12-10'), endDate: new Date('2023-12-05') },
+      location: 'Cervejaria Diu',
+      thumbnailPath: 'images/previews/evento.png'
+    }
+  }
+};

src/routes/(app)/events/_components/event-hexagon.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import Hexagon from '@/lib/components/hexagons/hexagon.svelte';
+  import type { Event } from '@/types/event.ts';
+
+  export let data;
+  export const orientation = 'vertical';
+  export let event = data as Event;
+</script>
+
+<Hexagon orientation="vertical">
+  <div
+    class="group relative box-content flex h-full w-full justify-center md:shadow-black/[.58] md:text-shadow"
+    data-testid="event-hexagon"
+  >
+    <div class="flex w-fit flex-col content-center justify-center">
+      <p
+        class="z-20 w-full whitespace-nowrap px-8 text-center text-xs text-gray-100 sm:text-xs md:text-sm lg:text-base xl:text-lg"
+      >
+        {#if !event.dateInterval.endDate}
+          {event.dateInterval.startDate
+            .toLocaleString('pt', {
+              day: 'numeric',
+              month: 'long',
+              year: 'numeric'
+            })
+            .replaceAll(/(de\s)|(\.)/gi, '')}
+        {:else}
+          {event.dateInterval.startDate
+            .toLocaleString('pt', {
+              day: 'numeric',
+              month: 'short',
+              year: '2-digit'
+            })
+            .replaceAll(/(de\s)|(\.)/gi, '') +
+            ' - ' +
+            event.dateInterval.endDate
+              .toLocaleDateString('pt', {
+                day: 'numeric',
+                month: 'short',
+                year: '2-digit'
+              })
+              .replaceAll(/(de\s)|(\.)/gi, '')}
+        {/if}
+      </p>
+      <p
+        class="z-20 my-1.5 w-full bg-taupe-200 text-center text-sm font-semibold text-rose-950 outline outline-2 outline-offset-2 outline-taupe-200 transition-colors ease-in group-hover:bg-taupe-200 group-hover:text-rose-950 group-hover:outline-taupe-200 group-hover:text-shadow-none sm:bg-transparent sm:text-sm sm:text-gray-100 sm:outline-transparent md:text-base lg:text-lg xl:text-xl"
+      >
+        {event.title}
+      </p>
+      <p
+        class="z-20 w-full whitespace-nowrap text-center text-xs text-gray-100 transition-all sm:text-xs md:text-sm lg:text-base xl:text-lg"
+      >
+        {event.location}
+      </p>
+    </div>
+    <div class="absolute inset-0 z-10 h-full w-full bg-vivid-red-950/[.62] text-lg" />
+    <img
+      src={event.thumbnailPath}
+      alt="Event thumbnail"
+      class="absolute inset-0 z-0 h-full w-full object-cover"
+    />
+  </div>
+</Hexagon>

src/types/date-interval.ts

@@ -0,0 +1,4 @@
+export type DateInterval = {
+  startDate: Date;
+  endDate?: Date;
+};

src/types/event.ts

@@ -0,0 +1,13 @@
+import type { DateInterval } from './date-interval.ts';
+
+export type Event = {
+  title: string;
+  description: string;
+  teamMemberIds: bigint[];
+  registerUrl: string;
+  dateInterval: DateInterval;
+  location?: string;
+  category?: string;
+  thumbnailPath: string;
+  slug?: string;
+};

tailwind.config.cjs

@@ -1,4 +1,7 @@
 /** @type {import('tailwindcss').Config} */
+
+const plugin = require('tailwindcss/plugin');
+
 module.exports = {
   content: ['./src/**/*.{html,js,svelte,ts,stories.js,stories.ts}'],
   theme: {
@@ -82,8 +85,26 @@ module.exports = {
       },
       fontSize: {
         huge: '10rem'
+      },
+
+      textShadow: {
+        none: '0 0 0 var(--tw-shadow-color)',
+        sm: '0 2px 4px var(--tw-shadow-color)',
+        DEFAULT: '0 4px 6px var(--tw-shadow-color)',
+        lg: '0 8px 16px var(--tw-shadow-color)'
       }
     }
   },
-  plugins: []
+  plugins: [
+    plugin(function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          'text-shadow': (value) => ({
+            textShadow: value
+          })
+        },
+        { values: theme('textShadow') }
+      );
+    })
+  ]
 };