feat: BottomNav

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

@@ -1,37 +1,10 @@
 <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"
-	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)"
-	/>
-	<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"
-		fill="white"
-	/>
-	<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>
+<svg width={size} height={size} viewBox="0 0 25 24" {fill} xmlns="http://www.w3.org/2000/svg" {...restProps}>
+	<path 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.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"/>
+	</svg>

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

@@ -0,0 +1,17 @@
+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/ui/BottomNav/BottomNav.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { HugeiconsIcon } from '@hugeicons/svelte'
+    import { SearchIcon, Home01FreeIcons, Home02FreeIcons, Home13Icon } from '@hugeicons/core-free-icons'
+	import type { HTMLAttributes } from "svelte/elements";
+	import {Home} from '$lib/icons';
+
+    interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
+        activeTab: string | number;
+    } 
+    let {activeTab = $bindable()}:IBottomNavProps = $props();
+
+    $effect(() => {
+        alert(activeTab)
+    })
+</script>
+
+<div class="flex items-center justify-between px-7 py-2 w-full border border-grey">
+    <label for="home">
+    <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">
+
+    <label for="search">
+    <HugeiconsIcon
+    icon={Home01FreeIcons}
+    altIcon={Home02FreeIcons}
+    showAlt={activeTab === "search"}
+    />
+    </label>
+    <input id="search" type="radio" value="search" bind:group={activeTab} name={"navTabs"} class="hidden">
+
+    <label for="scan">
+    <HugeiconsIcon
+    icon={Home01FreeIcons}
+    altIcon={Home02FreeIcons}
+    showAlt={activeTab === "scan"}
+    />
+    </label>
+    <input id="scan" type="radio" value="scan" bind:group={activeTab} name={"navTabs"} class="hidden">
+
+    <label for="comments">
+    <HugeiconsIcon
+    icon={Home01FreeIcons}
+    altIcon={Home02FreeIcons}
+    showAlt={activeTab === "comments"}
+    />
+    </label>
+    <input id="comments" type="radio" value="comments" bind:group={activeTab} name={"navTabs"} class="hidden">
+
+    <label for="profile">
+    <HugeiconsIcon
+    icon={Home01FreeIcons}
+    altIcon={Home02FreeIcons}
+    showAlt={activeTab === "profile"}
+    />
+    </label>
+    <input id="profile" type="radio" value="profile" bind:group={activeTab} name={"navTabs"} class="hidden">
+</div>

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

@@ -1,2 +1,3 @@
 export { default as Button } from "./Button/Button.svelte";
 export { default as Avatar } from "./Avatar/Avatar.svelte";
+export { default as BottomNav } from "./BottomNav/BottomNav.svelte";