Merge pull request #9 from Peter-512/popout-images

[DX-21] implemented image popout

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import * as Dialog from ".";
+	import { cn, flyAndScale } from "$lib/utils";
+	import { Cross2 } from "radix-icons-svelte";
+
+	type $$Props = DialogPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 200
+	};
+	export { className as class };
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+		<DialogPrimitive.Close
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+		>
+			<Cross2 class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DialogPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Description>

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn(
+		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</div>

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

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

src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { fade } from "svelte/transition";
+
+	type $$Props = DialogPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150
+	};
+	export { className as class };
+</script>
+
+<DialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn(
+		"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ",
+		className
+	)}
+	{...$$restProps}
+/>

src/lib/components/ui/dialog/dialog-portal.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	type $$Props = DialogPrimitive.PortalProps;
+</script>
+
+<DialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</DialogPrimitive.Portal>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+
+	type $$Props = DialogPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Title
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Title>

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

@@ -0,0 +1,34 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+
+import Title from "./dialog-title.svelte";
+import Portal from "./dialog-portal.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription
+};

src/lib/images/index.ts

@@ -13,18 +13,18 @@ import styleSrc from './style.webp';
 import subwaySrc from './subway.webp';
 import weirdStareSrc from './weird-stare.webp';
 
-const bouldering = { src: boulderingSrc, alt: 'Bouldering' };
-const climbing1 = { src: climbing1Src, alt: 'Climbing' };
-const climbing2 = { src: climbing2Src, alt: 'Climbing' };
-const climbing3 = { src: climbing3Src, alt: 'Climbing' };
-const expo1 = { src: expo1Src, alt: 'Expo' };
-const expo2 = { src: expo2Src, alt: 'Expo' };
-const expo3 = { src: expo3Src, alt: 'Expo' };
-const expo4 = { src: expo4Src, alt: 'Expo' };
-const selfie = { src: selfieSrc, alt: 'Selfie' };
-const style = { src: styleSrc, alt: 'Style' };
-const subway = { src: subwaySrc, alt: 'Subway' };
-const weirdStare = { src: weirdStareSrc, alt: 'Weird Stare' };
+const bouldering = { src: boulderingSrc, alt: 'Bouldering with my sister at the boulderbar in Vienna' };
+const climbing1 = { src: climbing1Src, alt: 'Climbing outside in Vienna' };
+const climbing2 = { src: climbing2Src, alt: 'Checking out a climbing route while preparing for it' };
+const climbing3 = { src: climbing3Src, alt: 'Looking at the top of an outdoor climb' };
+const expo1 = { src: expo1Src, alt: 'Filip and I talking to a Cronos recuiter at Future Entrepreneurship 2022' };
+const expo2 = { src: expo2Src, alt: 'Filip and I solving a puzzle on his phone at Future Entrepreneurship 2022' };
+const expo3 = { src: expo3Src, alt: 'Seif, Filip and I listening to a live "silent" podcast at Future Entrepreneurship 2022' };
+const expo4 = { src: expo4Src, alt: 'Selfie of Seif, Filip and myself at Future Entrepreneurship 2022' };
+const selfie = { src: selfieSrc, alt: 'Selfie in Vienna on a nice summer day' };
+const style = { src: styleSrc, alt: 'Philip and I trying out stylish coats' };
+const subway = { src: subwaySrc, alt: 'Posing in front of the subway in Vienna' };
+const weirdStare = { src: weirdStareSrc, alt: 'Unknowingly got photgraphed while strolling at the christmas market in Vienna' };
 
 export {
 	expo1,

src/routes/+page.svelte

@@ -5,6 +5,7 @@
 	import Testimonial from './Testimonial.svelte';
 	import { datacampLogo } from '$lib/logos';
 	import profile from '$lib/images/profile-pic.png';
+	import ImageViewer from './ImageViewer.svelte';
 
 	const images: Array<{ src: string; alt: string }> = Object.values(i);
 	// split images into 4 groups
@@ -42,12 +43,7 @@
 		{#each imageGroups as images}
 			<div class="grid gap-4">
 				{#each images as image}
-					<div class="overflow-hidden rounded-lg">
-						<img
-							class="h-full w-full object-cover transition-all duration-300 ease-in-out hover:scale-110"
-							src={image.src}
-							alt={image.alt} />
-					</div>
+					<ImageViewer {...image} />
 				{/each}
 			</div>
 		{/each}

src/routes/ImageViewer.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+
+	export let src: string;
+	export let alt: string;
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger class="focus:outline-gray-200">
+		<div class="overflow-hidden rounded-lg">
+			<img
+				class="h-full w-full cursor-pointer object-cover transition-all duration-300 ease-in-out hover:scale-110"
+				{src}
+				{alt} />
+		</div>
+	</Dialog.Trigger>
+	<Dialog.Content>
+		<img class="h-full w-full object-cover" {src} {alt} />
+		<Dialog.Footer>
+			<p>
+				{alt}
+			</p>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>