feat: BottomNav

platforms/metagram/src/lib/fragments/BottomNav/BottomNav.stories.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'svelte';
+import { BottomNav } from '..';
+
+export default {
+	title: 'UI/BottomNav',
+	component: BottomNav,
+	tags: ['autodocs'],
+	render: (args: { Component: BottomNav; props: ComponentProps<typeof BottomNav> }) => ({
+		Component: BottomNav,
+		props: args
+	})
+};
+
+export const Primary = {
+	args: {}
+};

platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Home, CommentsTwo, Search, Camera } from '$lib/icons';
+	import { goto } from '$app/navigation';
+
+	interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
+		activeTab: string;
+		profileSrc: string;
+	}
+	let {
+		activeTab = $bindable('home'),
+		profileSrc = 'https://picsum.photos/200'
+	}: IBottomNavProps = $props();
+
+	const handleClick = () => {
+		goto(`/${activeTab}`);
+	};
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+<nav
+	aria-label="Main navigation"
+	class="fixed start-0 bottom-0 flex w-full items-center justify-between px-7 py-2 sm:hidden"
+	role="tablist"
+>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<label for="home" onclick={handleClick}>
+		<Home
+			size="24px"
+			color={activeTab === 'home'
+				? 'var(--color-brand-burnt-orange)'
+				: 'var(--color-black-400)'}
+			fill={activeTab === 'home' ? 'var(--color-brand-burnt-orange)' : 'white'}
+		/>
+	</label>
+	<input
+		id="home"
+		type="radio"
+		value="home"
+		bind:group={activeTab}
+		name={'navTabs'}
+		class="hidden"
+	/>
+
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<label for="search" onclick={handleClick}>
+		<Search
+			size="24px"
+			color={activeTab === 'search'
+				? 'var(--color-brand-burnt-orange)'
+				: 'var(--color-black-400)'}
+			fill={activeTab === 'search' ? 'var(--color-brand-burnt-orange)' : 'white'}
+		/>
+	</label>
+	<input
+		id="search"
+		type="radio"
+		value="search"
+		bind:group={activeTab}
+		name={'navTabs'}
+		class="hidden"
+	/>
+
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<label for="camera" onclick={handleClick}>
+		<Camera
+			size="24px"
+			color={activeTab === 'camera'
+				? 'var(--color-brand-burnt-orange)'
+				: 'var(--color-black-400)'}
+			fill={activeTab === 'camera' ? 'var(--color-brand-burnt-orange)' : 'white'}
+		/>
+	</label>
+	<input
+		id="camera"
+		type="radio"
+		value="camera"
+		bind:group={activeTab}
+		name={'navTabs'}
+		class="hidden"
+	/>
+
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<label for="messages" onclick={handleClick}>
+		<CommentsTwo
+			size="24px"
+			color={activeTab === 'messages'
+				? 'var(--color-brand-burnt-orange)'
+				: 'var(--color-black-400)'}
+			fill={activeTab === 'messages' ? 'var(--color-brand-burnt-orange)' : 'white'}
+		/>
+	</label>
+	<input
+		id="messages"
+		type="radio"
+		value="messages"
+		bind:group={activeTab}
+		name={'navTabs'}
+		class="hidden"
+	/>
+
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<label for="profile" onclick={handleClick}>
+		<span
+			class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
+		>
+			<img
+				width="24px"
+				height="24px"
+				class="aspect-square rounded-full"
+				src={profileSrc}
+				alt="profile"
+			/>
+		</span>
+	</label>
+	<input
+		id="profile"
+		type="radio"
+		value="profile"
+		bind:group={activeTab}
+		name={'navTabs'}
+		class="hidden"
+	/>
+</nav>

platforms/metagram/src/lib/fragments/index.ts

@@ -0,0 +1 @@
+export { default as BottomNav } from './BottomNav/BottomNav.svelte';

platforms/metagram/src/lib/icons/Camera.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { ISvgProps } from './../types';
+
+	let { size = '20px', color = '#A5A5A5', fill = 'white', ...restProps }: ISvgProps = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 25 24"
+	{fill}
+	xmlns="http://www.w3.org/2000/svg"
+	{...restProps}
+>
+	<path
+		d="M8.00004 6V6.75C8.2508 6.75 8.48498 6.62468 8.62408 6.41603L8.00004 6ZM17 6L16.376 6.41603C16.5151 6.62467 16.7492 6.75 17 6.75V6ZM3.25004 13.5V11.5H1.75004V13.5H3.25004ZM8.18854 4.36518L7.376 5.58398L8.62408 6.41603L9.43661 5.19723L8.18854 4.36518ZM12.1407 2.25C11.6305 2.25 11.1969 2.24925 10.8369 2.28282C10.4615 2.31783 10.1124 2.39366 9.7728 2.5754L10.4806 3.89791C10.5831 3.843 10.7171 3.8005 10.9762 3.77634C11.2506 3.75075 11.6031 3.75 12.1407 3.75V2.25ZM9.43661 5.19723C9.73486 4.74985 9.93097 4.45705 10.1045 4.24286C10.2683 4.04074 10.378 3.95282 10.4806 3.89791L9.7728 2.5754C9.43322 2.75714 9.17649 3.00553 8.93908 3.29853C8.71144 3.57948 8.47158 3.94062 8.18854 4.36518L9.43661 5.19723ZM3.25004 11.5C3.25004 10.0499 3.25818 9.49107 3.38998 9.05658L1.95457 8.62115C1.7419 9.32224 1.75004 10.159 1.75004 11.5H3.25004ZM8.00004 5.25C6.65904 5.25 5.82228 5.24186 5.12119 5.45454L5.55661 6.88995C5.99111 6.75814 6.54991 6.75 8.00004 6.75V5.25ZM3.38998 9.05658C3.70507 8.01787 4.51791 7.20503 5.55661 6.88995L5.12119 5.45454C3.60308 5.91505 2.41509 7.10304 1.95457 8.62115L3.38998 9.05658ZM10 20.25C8.33793 20.25 7.15728 20.2488 6.25137 20.1417C5.36201 20.0366 4.83567 19.8384 4.43826 19.5123L3.48667 20.6718C4.19562 21.2536 5.04432 21.5095 6.07529 21.6313C7.0897 21.7512 8.37467 21.75 10 21.75V20.25ZM1.75004 13.5C1.75004 15.1254 1.74881 16.4103 1.86872 17.4248C1.99058 18.4557 2.24642 19.3044 2.82824 20.0134L3.98776 19.0618C3.66162 18.6644 3.46347 18.138 3.35835 17.2487C3.25127 16.3428 3.25004 15.1621 3.25004 13.5H1.75004ZM4.43826 19.5123C4.2737 19.3772 4.12281 19.2263 3.98776 19.0618L2.82824 20.0134C3.02562 20.2539 3.24616 20.4744 3.48667 20.6718L4.43826 19.5123ZM23.25 13.5V11.5H21.75V13.5H23.25ZM15.5634 5.19722L16.376 6.41603L17.624 5.58397L16.8115 4.36517L15.5634 5.19722ZM12.8593 3.75C13.3969 3.75 13.7494 3.75075 14.0238 3.77634C14.2829 3.80049 14.4169 3.84299 14.5195 3.89791L15.2272 2.57539C14.8877 2.39366 14.5386 2.31783 14.1631 2.28282C13.8031 2.24925 13.3695 2.25 12.8593 2.25V3.75ZM16.8115 4.36517C16.5285 3.94062 16.2886 3.57948 16.061 3.29853C15.8235 3.00553 15.5668 2.75713 15.2272 2.57539L14.5195 3.89791C14.6221 3.95282 14.7317 4.04074 14.8955 4.24286C15.0691 4.45705 15.2652 4.74985 15.5634 5.19722L16.8115 4.36517ZM23.25 11.5C23.25 10.159 23.2581 9.32224 23.0455 8.62115L21.6101 9.05657C21.7419 9.49107 21.75 10.0499 21.75 11.5H23.25ZM17 6.75C18.4501 6.75 19.0089 6.75814 19.4434 6.88994L19.8789 5.45453C19.1778 5.24186 18.341 5.25 17 5.25V6.75ZM23.0455 8.62115C22.585 7.10304 21.397 5.91505 19.8789 5.45453L19.4434 6.88994C20.4821 7.20503 21.295 8.01787 21.6101 9.05657L23.0455 8.62115ZM15 21.75C16.6254 21.75 17.9103 21.7512 18.9248 21.6313C19.9557 21.5095 20.8044 21.2536 21.5134 20.6718L20.5618 19.5123C20.1644 19.8384 19.638 20.0366 18.7487 20.1417C17.8428 20.2488 16.6621 20.25 15 20.25V21.75ZM21.75 13.5C21.75 15.1621 21.7488 16.3428 21.6417 17.2487C21.5366 18.138 21.3384 18.6644 21.0123 19.0618L22.1718 20.0134C22.7536 19.3044 23.0095 18.4557 23.1313 17.4248C23.2512 16.4103 23.25 15.1254 23.25 13.5H21.75ZM21.5134 20.6718C21.7539 20.4744 21.9744 20.2539 22.1718 20.0134L21.0123 19.0618C20.8772 19.2263 20.7263 19.3772 20.5618 19.5123L21.5134 20.6718ZM12.8593 2.25H12.1407V3.75H12.8593V2.25ZM10 21.75H15V20.25H10V21.75Z"
+		fill={color}
+	/>
+	<path
+		d="M12.5 9V17M16.5 13H8.5"
+		stroke={color}
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

platforms/metagram/src/lib/icons/CommentsTwo.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import type { ISvgProps } from './../types';
 
-	let { size = '20px', color = '#A5A5A5', ...restProps }: ISvgProps = $props();
+	let { size = '20px', color = '#A5A5A5', fill = 'white', ...restProps }: ISvgProps = $props();
 </script>
 
 <svg
 	width={size}
 	height={size}
 	viewBox="0 0 24 24"
-	fill="none"
+	{fill}
 	xmlns="http://www.w3.org/2000/svg"
 	{...restProps}
 >

platforms/metagram/src/lib/icons/Home.svelte

@@ -1,37 +1,30 @@
 <script lang="ts">
 	import type { ISvgProps } from './../types';
 
-	let { size = '20px', ...restProps }: ISvgProps = $props();
+	let { size = '20px', color = '#A5A5A5', fill = 'white', ...restProps }: ISvgProps = $props();
 </script>
 
 <svg
 	width={size}
 	height={size}
-	viewBox="0 0 24 24"
-	fill="none"
+	viewBox="0 0 25 24"
+	{fill}
 	xmlns="http://www.w3.org/2000/svg"
 	{...restProps}
 >
 	<path
-		d="M3.16405 11.3497L4 11.5587L4.45686 16.1005C4.715 18.6668 4.84407 19.9499 5.701 20.7249C6.55793 21.5 7.84753 21.5 10.4267 21.5H13.5733C16.1525 21.5 17.4421 21.5 18.299 20.7249C19.1559 19.9499 19.285 18.6668 19.5431 16.1005L20 11.5587L20.836 11.3497C21.5201 11.1787 22 10.564 22 9.85882C22 9.35735 21.7553 8.88742 21.3445 8.59985L13.1469 2.86154C12.4583 2.37949 11.5417 2.37949 10.8531 2.86154L2.65549 8.59985C2.24467 8.88742 2 9.35735 2 9.85882C2 10.564 2.47993 11.1787 3.16405 11.3497Z"
-		fill="url(#paint0_linear_1643_261)"
+		d="M3.66405 11.3497L4.5 11.5587L4.95686 16.1005C5.215 18.6668 5.34407 19.9499 6.201 20.7249C7.05793 21.5 8.34753 21.5 10.9267 21.5H14.0733C16.6525 21.5 17.9421 21.5 18.799 20.7249C19.6559 19.9499 19.785 18.6668 20.0431 16.1005L20.5 11.5587L21.336 11.3497C22.0201 11.1787 22.5 10.564 22.5 9.85882C22.5 9.35735 22.2553 8.88742 21.8445 8.59985L13.6469 2.86154C12.9583 2.37949 12.0417 2.37949 11.3531 2.86154L3.15549 8.59985C2.74467 8.88742 2.5 9.35735 2.5 9.85882C2.5 10.564 2.97993 11.1787 3.66405 11.3497Z"
+		stroke={color}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
 	/>
 	<path
-		d="M12 17C13.3807 17 14.5 15.8807 14.5 14.5C14.5 13.1193 13.3807 12 12 12C10.6193 12 9.5 13.1193 9.5 14.5C9.5 15.8807 10.6193 17 12 17Z"
+		d="M12.5 17C13.8807 17 15 15.8807 15 14.5C15 13.1193 13.8807 12 12.5 12C11.1193 12 10 13.1193 10 14.5C10 15.8807 11.1193 17 12.5 17Z"
 		fill="white"
+		stroke={color}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
 	/>
-	<defs>
-		<linearGradient
-			id="paint0_linear_1643_261"
-			x1="-5.55319"
-			y1="5.16"
-			x2="33.2477"
-			y2="6.45747"
-			gradientUnits="userSpaceOnUse"
-		>
-			<stop stop-color="#4D44EF" />
-			<stop offset="0.5" stop-color="#F35B5B" />
-			<stop offset="1" stop-color="#F7A428" />
-		</linearGradient>
-	</defs>
 </svg>

platforms/metagram/src/lib/icons/Search.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { ISvgProps } from './../types';
+
+	let { size = '20px', color = '#A5A5A5', fill = 'white', ...restProps }: ISvgProps = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	{fill}
+	xmlns="http://www.w3.org/2000/svg"
+	{...restProps}
+>
+	<path
+		d="M17 17L21 21"
+		stroke={color}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C15.4183 19 19 15.4183 19 11Z"
+		stroke={color}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

platforms/metagram/src/lib/icons/index.ts

@@ -6,3 +6,5 @@ export { default as VerticalDots } from './VerticalDots.svelte';
 export { default as Home } from './Home.svelte';
 export { default as Flash } from './Flash.svelte';
 export { default as CommentsTwo } from './CommentsTwo.svelte';
+export { default as Search } from './Search.svelte';
+export { default as Camera } from './Camera.svelte';

platforms/metagram/src/lib/ui/Avatar/Avatar.stories.ts

@@ -1,43 +1,40 @@
-import type { ComponentProps } from "svelte";
-import Avatar from "./Avatar.svelte";
+import type { ComponentProps } from 'svelte';
+import Avatar from './Avatar.svelte';
 
 export default {
-    title: "UI/Avatar",
-    component: Avatar,
-    tags: ["autodocs"],
-    render: (args: {
-        Component: Avatar;
-        props: ComponentProps<typeof Avatar>;
-    }) => ({
-        Component: Avatar,
-        props: args,
-    }),
+	title: 'UI/Avatar',
+	component: Avatar,
+	tags: ['autodocs'],
+	render: (args: { Component: Avatar; props: ComponentProps<typeof Avatar> }) => ({
+		Component: Avatar,
+		props: args
+	})
 };
 
 export const Large = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "lg",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'lg'
+	}
 };
 
 export const Medium = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "md",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'md'
+	}
 };
 
 export const Small = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "sm",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'sm'
+	}
 };
 
 export const ExtraSmall = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "xs",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'xs'
+	}
 };

platforms/metagram/src/lib/ui/Avatar/Avatar.svelte

@@ -1,31 +1,26 @@
 <script lang="ts">
-import { cn } from "$lib/utils";
-import type { HTMLImgAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLImgAttributes } from 'svelte/elements';
 
-interface IAvatarProps extends HTMLImgAttributes {
-    src: string;
-    alt?: string;
-    size?: "xs" | "sm" | "md" | "lg";
-}
+	interface IAvatarProps extends HTMLImgAttributes {
+		src: string;
+		alt?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+	}
 
-const {
-    src,
-    alt = "User Avatar",
-    size = "md",
-    ...restProps
-}: IAvatarProps = $props();
+	const { src, alt = 'User Avatar', size = 'md', ...restProps }: IAvatarProps = $props();
 
-const sizeVariant = {
-    xs: "w-6 h-6",
-    sm: "w-10 h-10",
-    md: "w-12 h-12",
-    lg: "w-30 h-30",
-};
+	const sizeVariant = {
+		xs: 'w-6 h-6',
+		sm: 'w-10 h-10',
+		md: 'w-12 h-12',
+		lg: 'w-30 h-30'
+	};
 
-const classes = $derived({
-    common: cn("rounded-full"),
-    size: sizeVariant[size] || sizeVariant.md,
-});
+	const classes = $derived({
+		common: cn('rounded-full'),
+		size: sizeVariant[size] || sizeVariant.md
+	});
 </script>
 
 <img