Feature/event details

.eslintignore

@@ -7,6 +7,7 @@ node_modules
 .env.*
 !.env.example
 storybook-static
+/src/lib/components/ui
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

package.json

@@ -71,7 +71,10 @@
   "type": "module",
   "dependencies": {
     "@vitest/coverage-v8": "^1.4.0",
+    "bits-ui": "^0.21.10",
     "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "embla-carousel-svelte": "^8.1.5",
     "lucide-svelte": "^0.378.0",
     "mode-watcher": "^0.3.0",
     "storybook-addon-pseudo-states": "^3.0.1",

src/lib/components/icons/icons.ts

@@ -1,14 +1,16 @@
 import {
-  FaBrandsInstagram,
-  FaBrandsTwitter,
   FaBrandsFacebook,
   FaBrandsGithub,
+  FaBrandsInstagram,
   FaBrandsLinkedin,
-  FaSolidUser,
+  FaBrandsTwitter,
+  FaCalendar,
   FaSolidBars,
-  FaSolidGlobe
+  FaSolidGlobe,
+  FaSolidLocationDot,
+  FaSolidUser
 } from 'svelte-icons-pack/fa';
-import { IoMail, IoClose } from 'svelte-icons-pack/io';
+import { IoClose, IoMail } from 'svelte-icons-pack/io';
 
 const Icons = {
   Instagram: FaBrandsInstagram,
@@ -20,7 +22,9 @@ const Icons = {
   User: FaSolidUser,
   Bars: FaSolidBars,
   Close: IoClose,
-  Globe: FaSolidGlobe
+  Globe: FaSolidGlobe,
+  Location: FaSolidLocationDot,
+  Calendar: FaCalendar
 };
 
 export default Icons;

src/lib/components/ui/button/button.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Button as ButtonPrimitive } from 'bits-ui';
+  import { type Events, type Props, buttonVariants } from './index.js';
+  import { cn } from '$lib/utils.js';
+
+  type $$Props = Props;
+  type $$Events = Events;
+
+  let className: $$Props['class'] = undefined;
+  export let variant: $$Props['variant'] = 'default';
+  export let size: $$Props['size'] = 'default';
+  export let builders: $$Props['builders'] = [];
+  export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+  {builders}
+  class={cn(buttonVariants({ variant, size, className }))}
+  type="button"
+  {...$$restProps}
+  on:click
+  on:keydown
+>
+  <slot />
+</ButtonPrimitive.Root>

src/lib/components/ui/button/index.ts

@@ -0,0 +1,48 @@
+import { type VariantProps, tv } from 'tailwind-variants';
+import type { Button as ButtonPrimitive } from 'bits-ui';
+import Root from './button.svelte';
+
+const buttonVariants = tv({
+  base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  variants: {
+    variant: {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      ghost: 'hover:bg-accent hover:text-accent-foreground',
+      link: 'text-primary underline-offset-4 hover:underline'
+    },
+    size: {
+      default: 'h-10 px-4 py-2',
+      sm: 'h-9 rounded-md px-3',
+      lg: 'h-11 rounded-md px-8',
+      icon: 'h-10 w-10'
+    }
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default'
+  }
+});
+
+type Variant = VariantProps<typeof buttonVariants>['variant'];
+type Size = VariantProps<typeof buttonVariants>['size'];
+
+type Props = ButtonPrimitive.Props & {
+  variant?: Variant;
+  size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+  Root,
+  type Props,
+  type Events,
+  //
+  Root as Button,
+  type Props as ButtonProps,
+  type Events as ButtonEvents,
+  buttonVariants
+};

src/lib/components/ui/card/card-content.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils.js';
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<div class={cn('p-6 pt-0', className)} {...$$restProps}>
+  <slot />
+</div>

src/lib/components/ui/card/card-description.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils.js';
+
+  type $$Props = HTMLAttributes<HTMLParagraphElement>;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
+  <slot />
+</p>

src/lib/components/ui/card/card-footer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils.js';
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
+  <slot />
+</div>

src/lib/components/ui/card/card-header.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils.js';
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>
+  <slot />
+</div>

src/lib/components/ui/card/card-title.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { HeadingLevel } from './index.js';
+  import { cn } from '$lib/utils.js';
+
+  type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+    tag?: HeadingLevel;
+  };
+
+  let className: $$Props['class'] = undefined;
+  export let tag: $$Props['tag'] = 'h3';
+  export { className as class };
+</script>
+
+<svelte:element
+  this={tag}
+  class={cn('text-lg font-semibold leading-none tracking-tight', className)}
+  {...$$restProps}
+>
+  <slot />
+</svelte:element>

src/lib/components/ui/card/card.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils.js';
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<div
+  class={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+  {...$$restProps}
+>
+  <slot />
+</div>

src/lib/components/ui/card/index.ts

@@ -0,0 +1,24 @@
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+
+export {
+  Root,
+  Content,
+  Description,
+  Footer,
+  Header,
+  Title,
+  //
+  Root as Card,
+  Content as CardContent,
+  Description as CardDescription,
+  Footer as CardFooter,
+  Header as CardHeader,
+  Title as CardTitle
+};
+
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

src/lib/components/ui/carousel/carousel-content.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import emblaCarouselSvelte from 'embla-carousel-svelte';
+  import { getEmblaContext } from './context.js';
+  import { cn } from '$lib/utils.js';
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+
+  const { orientation, options, plugins, onInit } = getEmblaContext('<Carousel.Content/>');
+</script>
+
+<div
+  class="overflow-hidden"
+  use:emblaCarouselSvelte={{
+    options: {
+      container: '[data-embla-container]',
+      slides: '[data-embla-slide]',
+      ...$options,
+      axis: $orientation === 'horizontal' ? 'x' : 'y'
+    },
+    plugins: $plugins
+  }}
+  on:emblaInit={onInit}
+>
+  <div
+    class={cn('flex', $orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
+    data-embla-container=""
+    {...$$restProps}
+  >
+    <slot />
+  </div>
+</div>

src/lib/components/ui/carousel/carousel-item.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { getEmblaContext } from './context.js';
+  import { cn } from '$lib/utils.js';
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+  let className: string | undefined | null = undefined;
+  export { className as class };
+
+  const { orientation } = getEmblaContext('<Carousel.Item/>');
+</script>
+
+<div
+  role="group"
+  aria-roledescription="slide"
+  class={cn(
+    'min-w-0 shrink-0 grow-0 basis-full',
+    $orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+    className
+  )}
+  data-embla-slide=""
+  {...$$restProps}
+>
+  <slot />
+</div>

src/lib/components/ui/carousel/carousel-next.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import ArrowRight from 'lucide-svelte/icons/arrow-right';
+  import type { VariantProps } from 'tailwind-variants';
+  import { getEmblaContext } from './context.js';
+  import { cn } from '$lib/utils.js';
+  import { Button, type Props, type buttonVariants } from '$lib/components/ui/button/index.js';
+
+  type $$Props = Props;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+  export let variant: VariantProps<typeof buttonVariants>['variant'] = 'outline';
+  export let size: VariantProps<typeof buttonVariants>['size'] = 'icon';
+  const { orientation, canScrollNext, scrollNext, handleKeyDown } =
+    getEmblaContext('<Carousel.Next/>');
+</script>
+
+<Button
+  {variant}
+  {size}
+  class={cn(
+    'absolute h-8 w-8 touch-manipulation rounded-full',
+    $orientation === 'horizontal'
+      ? '-right-12 top-1/2 -translate-y-1/2'
+      : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+    className
+  )}
+  disabled={!$canScrollNext}
+  on:click={scrollNext}
+  on:keydown={handleKeyDown}
+  {...$$restProps}
+>
+  <ArrowRight class="h-4 w-4" />
+  <span class="sr-only">Next slide</span>
+</Button>

src/lib/components/ui/carousel/carousel-previous.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import ArrowLeft from 'lucide-svelte/icons/arrow-left';
+  import type { VariantProps } from 'tailwind-variants';
+  import { getEmblaContext } from './context.js';
+  import { cn } from '$lib/utils.js';
+  import { Button, type Props, type buttonVariants } from '$lib/components/ui/button/index.js';
+
+  type $$Props = Props;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+  export let variant: VariantProps<typeof buttonVariants>['variant'] = 'outline';
+  export let size: VariantProps<typeof buttonVariants>['size'] = 'icon';
+
+  const { orientation, canScrollPrev, scrollPrev, handleKeyDown } =
+    getEmblaContext('<Carousel.Previous/>');
+</script>
+
+<Button
+  {variant}
+  {size}
+  class={cn(
+    'absolute h-8 w-8 touch-manipulation rounded-full',
+    $orientation === 'horizontal'
+      ? '-left-12 top-1/2 -translate-y-1/2'
+      : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+    className
+  )}
+  disabled={!$canScrollPrev}
+  on:click={scrollPrev}
+  on:keydown={handleKeyDown}
+  {...$$restProps}
+>
+  <ArrowLeft class="h-4 w-4" />
+  <span class="sr-only">Previous slide</span>
+</Button>