From ac4aeb0ea72e6942a96977475b309cb2c625495e Mon Sep 17 00:00:00 2001
From: Sahil Garg <sahil@auvo.io>
Date: Tue, 13 May 2025 13:03:51 +0530
Subject: [PATCH 1/6] feat: added metagram header primary linear gradient.

---
 .../Header/Header.stories.snippet.svelte      |  0
 .../lib/fragments/Header/Header.stories.ts    | 50 ++++++++++++++++
 .../src/lib/fragments/Header/Header.svelte    | 58 +++++++++++++++++++
 platforms/metagram/src/lib/fragments/index.ts |  1 +
 .../metagram/src/lib/ui/Button/Button.svelte  | 38 +++---------
 5 files changed, 118 insertions(+), 29 deletions(-)
 create mode 100644 platforms/metagram/src/lib/fragments/Header/Header.stories.snippet.svelte
 create mode 100644 platforms/metagram/src/lib/fragments/Header/Header.stories.ts
 create mode 100644 platforms/metagram/src/lib/fragments/Header/Header.svelte
 create mode 100644 platforms/metagram/src/lib/fragments/index.ts

diff --git a/platforms/metagram/src/lib/fragments/Header/Header.stories.snippet.svelte b/platforms/metagram/src/lib/fragments/Header/Header.stories.snippet.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
new file mode 100644
index 000000000..091d745eb
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
@@ -0,0 +1,50 @@
+import type { ComponentProps } from "svelte";
+import Header from "./Header.svelte";
+
+export default {
+    title: "Fragments/Header",
+    component: Header,
+    tags: ["autodocs"],
+    render: (args: {
+        Component: Header;
+        props: ComponentProps<typeof Header>;
+    }) => ({
+        Component: Header,
+        props: args,
+    }),
+};
+
+export const Primary = {
+    args: {
+        variant: "primary",
+        heading: "metagram",
+    },
+};
+
+// export const Large = {
+//     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",
+//     },
+// };
+
+// export const Small = {
+//     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",
+//     },
+// };
diff --git a/platforms/metagram/src/lib/fragments/Header/Header.svelte b/platforms/metagram/src/lib/fragments/Header/Header.svelte
new file mode 100644
index 000000000..ec018c67d
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/Header/Header.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import type { HTMLAttributes } from "svelte/elements";
+
+interface IHeaderProps extends HTMLAttributes<HTMLElement> {
+    variant: "primary" | "secondary";
+    heading: string;
+    callback?: () => void;
+}
+
+const { variant, callback, heading, ...restProps }: IHeaderProps = $props();
+
+const variantClasses = {
+    primary: {
+        text: "text-transparent bg-clip-text bg-[image:var(--color-brand-gradient)]",
+    },
+    secondary: {
+        text: "",
+    },
+};
+
+const classes = $derived({
+    common: cn("flex items-center justify-between p-4"),
+    text: variantClasses[variant].text,
+});
+</script>
+
+<header {...restProps} class={cn([classes.common, restProps.class])}>
+    <h1 class={cn([
+        classes.text
+    ])}>
+        {heading}
+    </h1>
+    {#if callback}
+        <button
+            class="p-2 rounded-full hover:bg-gray-200"
+            onclick={callback}
+        >
+        Something
+        </button>
+    {/if}
+</header>
+
+<!--
+@component
+@name Header
+@description Header fragment.
+@props
+    - variant: Can be 'primary' for home screen header with a flash, 'secondary' without flash, or 'tertiary'.
+    - heading: The main heading text.
+    - callback: A function to be called when the header is clicked.
+@usage
+    <script>
+        import { Header } from "$lib/fragments";
+    </script>
+
+    <Header variant="primary" heading="metagram" callback={() => console.log('Header clicked')} />
+-->
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
new file mode 100644
index 000000000..657926bbf
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/index.ts
@@ -0,0 +1 @@
+export { default as Header } from "./Header/Header.svelte";
diff --git a/platforms/metagram/src/lib/ui/Button/Button.svelte b/platforms/metagram/src/lib/ui/Button/Button.svelte
index 16af60256..ae962d7a2 100644
--- a/platforms/metagram/src/lib/ui/Button/Button.svelte
+++ b/platforms/metagram/src/lib/ui/Button/Button.svelte
@@ -3,7 +3,7 @@
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	interface IButtonProps extends HTMLButtonAttributes {
-		variant?: 'primary' | 'secondary';
+		variant?: 'primary' | 'danger';
 		isLoading?: boolean;
 		callback?: () => Promise<void> | void;
 		blockingClick?: boolean;
@@ -39,29 +39,13 @@
 	};
 
 	const variantClasses = {
-		primary: {
-			background: 'bg-grey',
-			text: 'text-black-800',
-			border: 'border border-black-400'
-		},
-		secondary: {
-			background: 'bg-brand-burnt-orange',
-			text: 'text-white',
-			border: 'border border-brand-burnt-orange-600'
-		}
+		primary: { background: 'bg-grey', text: 'text-black-800' },
+		danger: { background: 'bg-red-500', text: 'text-white' }
 	};
 
 	const disabledVariantClasses = {
-		primary: {
-			background: 'bg-grey/50',
-			text: 'text-black-800/50',
-			border: 'border border-black-400/50'
-		},
-		secondary: {
-			background: 'bg-brand-burnt-orange/50',
-			text: 'text-white/50',
-			border: 'border border-brand-burnt-orange-600/50'
-		}
+		primary: { background: 'bg-grey/50', text: 'text-black-800/50' },
+		danger: { background: 'bg-red-500/50', text: 'text-white/50' }
 	};
 
 	const sizeVariant = {
@@ -80,9 +64,6 @@
 		text: disabled
 			? disabledVariantClasses[variant].text || variantClasses[variant].text
 			: variantClasses[variant].text,
-		border: disabled
-			? disabledVariantClasses[variant].border || variantClasses[variant].border
-			: variantClasses[variant].border,
 		disabled: 'cursor-not-allowed'
 	});
 </script>
@@ -94,7 +75,6 @@
 			classes.common,
 			classes.background,
 			classes.text,
-			classes.border,
 			disabled && classes.disabled,
 			restProps.class
 		].join(' ')
@@ -118,12 +98,12 @@
 	</div>
 </button>
 
-<!-- 
+<!--
     @component
     export default Button
     @description
     This component is a button with a loading spinner that can be used to indicate that an action is being performed.
-    
+
     @props
     - variant: The variant of the button. Default is `primary`.
     - size: The size of the button. Default is `md`.
@@ -132,13 +112,13 @@
     - blockingClick: A boolean to indicate if the button should block the click event while the callback function is being executed.
     - icon: A slot for an icon to be displayed inside the button.
     - ...restProps: Any other props that can be passed to a button element.
-    
+
     @usage
     ```html
     <script lang="ts">
         import * as Button from '$lib/ui/Button'
     </script>
-    
+
     <Button.Action variant="primary" callback={() => console.log('clicked')}>
       Click me
     </Button.Action>

From 5c1a3103cc698c3d6306e2576634c782d2331f43 Mon Sep 17 00:00:00 2001
From: Sahil Garg <sahil@auvo.io>
Date: Tue, 13 May 2025 13:14:38 +0530
Subject: [PATCH 2/6] feat: added flash icon.

---
 .vscode/settings.json                         |  2 +-
 .../lib/fragments/Header/Header.stories.ts    | 34 +++-------
 .../src/lib/fragments/Header/Header.svelte    | 63 +++++++++----------
 3 files changed, 38 insertions(+), 61 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3b8b77f9c..df1242fa5 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -22,7 +22,7 @@
         }
     },
     "[svelte]": {
-        "editor.defaultFormatter": "biomejs.biome",
+        "editor.defaultFormatter": "svelte.svelte-vscode",
         "editor.codeActionsOnSave": {
             "source.organizeImports.biome": "explicit",
             "source.fixAll.biome": "explicit"
diff --git a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
index 091d745eb..86cd04579 100644
--- a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
+++ b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
@@ -18,33 +18,13 @@ export const Primary = {
     args: {
         variant: "primary",
         heading: "metagram",
+        callback: () => alert("clicked"),
     },
 };
 
-// export const Large = {
-//     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",
-//     },
-// };
-
-// export const Small = {
-//     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",
-//     },
-// };
+export const PrimaryWithNoFlash = {
+    args: {
+        variant: "primary",
+        heading: "messages",
+    },
+};
diff --git a/platforms/metagram/src/lib/fragments/Header/Header.svelte b/platforms/metagram/src/lib/fragments/Header/Header.svelte
index ec018c67d..1ddcb0b62 100644
--- a/platforms/metagram/src/lib/fragments/Header/Header.svelte
+++ b/platforms/metagram/src/lib/fragments/Header/Header.svelte
@@ -1,44 +1,41 @@
 <script lang="ts">
-import { cn } from "$lib/utils";
-import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import { ZapIcon } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 
-interface IHeaderProps extends HTMLAttributes<HTMLElement> {
-    variant: "primary" | "secondary";
-    heading: string;
-    callback?: () => void;
-}
+	interface IHeaderProps extends HTMLAttributes<HTMLElement> {
+		variant: 'primary' | 'secondary';
+		heading: string;
+		callback?: () => void;
+	}
 
-const { variant, callback, heading, ...restProps }: IHeaderProps = $props();
+	const { variant, callback, heading, ...restProps }: IHeaderProps = $props();
 
-const variantClasses = {
-    primary: {
-        text: "text-transparent bg-clip-text bg-[image:var(--color-brand-gradient)]",
-    },
-    secondary: {
-        text: "",
-    },
-};
+	const variantClasses = {
+		primary: {
+			text: 'text-transparent bg-clip-text bg-[image:var(--color-brand-gradient)]'
+		},
+		secondary: {
+			text: ''
+		}
+	};
 
-const classes = $derived({
-    common: cn("flex items-center justify-between p-4"),
-    text: variantClasses[variant].text,
-});
+	const classes = $derived({
+		common: cn('flex items-center justify-between p-4'),
+		text: cn([variantClasses[variant].text, ''])
+	});
 </script>
 
 <header {...restProps} class={cn([classes.common, restProps.class])}>
-    <h1 class={cn([
-        classes.text
-    ])}>
-        {heading}
-    </h1>
-    {#if callback}
-        <button
-            class="p-2 rounded-full hover:bg-gray-200"
-            onclick={callback}
-        >
-        Something
-        </button>
-    {/if}
+	<h1 class={cn([classes.text])}>
+		{heading}
+	</h1>
+	{#if callback}
+		<button class="cursor-pointer rounded-full p-2 hover:bg-gray-100" onclick={callback}>
+			<HugeiconsIcon icon={ZapIcon} size={18} color="var(--color-black-500)" />
+		</button>
+	{/if}
 </header>
 
 <!--

From 9037b454db64916ec8192aef10ad1eb54b2f43d8 Mon Sep 17 00:00:00 2001
From: Sahil Garg <sahil@auvo.io>
Date: Tue, 13 May 2025 13:31:23 +0530
Subject: [PATCH 3/6] feat: added secondary state of header.

---
 .../lib/fragments/Header/Header.stories.ts    |  7 +++++++
 .../src/lib/fragments/Header/Header.svelte    | 19 +++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
index 86cd04579..ea536e848 100644
--- a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
+++ b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
@@ -28,3 +28,10 @@ export const PrimaryWithNoFlash = {
         heading: "messages",
     },
 };
+
+export const Secondary = {
+    args: {
+        variant: "secondary",
+        heading: "Account",
+    },
+};
diff --git a/platforms/metagram/src/lib/fragments/Header/Header.svelte b/platforms/metagram/src/lib/fragments/Header/Header.svelte
index 1ddcb0b62..9872cba4e 100644
--- a/platforms/metagram/src/lib/fragments/Header/Header.svelte
+++ b/platforms/metagram/src/lib/fragments/Header/Header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { cn } from '$lib/utils';
-	import { ZapIcon } from '@hugeicons/core-free-icons';
+	import { ArrowLeft01Icon, ZapIcon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -28,12 +28,19 @@
 </script>
 
 <header {...restProps} class={cn([classes.common, restProps.class])}>
-	<h1 class={cn([classes.text])}>
-		{heading}
-	</h1>
-	{#if callback}
+	<span class="flex items-center gap-2">
+		{#if variant === 'secondary'}
+			<button class="cursor-pointer rounded-full p-2 hover:bg-gray-100" onclick={callback}>
+				<HugeiconsIcon icon={ArrowLeft01Icon} size={24} color="var(--color-black-500)" />
+			</button>
+		{/if}
+		<h1 class={cn([classes.text])}>
+			{heading}
+		</h1>
+	</span>
+	{#if callback && variant === 'primary'}
 		<button class="cursor-pointer rounded-full p-2 hover:bg-gray-100" onclick={callback}>
-			<HugeiconsIcon icon={ZapIcon} size={18} color="var(--color-black-500)" />
+			<HugeiconsIcon icon={ZapIcon} size={24} color="var(--color-black-500)" />
 		</button>
 	{/if}
 </header>

From 9aba8a9d04291dfc20b465b7a2657fda31bad4b3 Mon Sep 17 00:00:00 2001
From: Sahil Garg <sahil@auvo.io>
Date: Tue, 13 May 2025 13:42:05 +0530
Subject: [PATCH 4/6] feat: added secondary state of header with menu.

---
 .../lib/fragments/Header/Header.stories.ts    |  8 ++++++++
 .../src/lib/fragments/Header/Header.svelte    | 19 +++++++++++++++----
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
index ea536e848..43230f910 100644
--- a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
+++ b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
@@ -35,3 +35,11 @@ export const Secondary = {
         heading: "Account",
     },
 };
+
+export const SecondaryWithMenu = {
+    args: {
+        variant: "secondary",
+        heading: "Account",
+        callback: () => alert("menu clicked"),
+    },
+};
diff --git a/platforms/metagram/src/lib/fragments/Header/Header.svelte b/platforms/metagram/src/lib/fragments/Header/Header.svelte
index 9872cba4e..01cfa1056 100644
--- a/platforms/metagram/src/lib/fragments/Header/Header.svelte
+++ b/platforms/metagram/src/lib/fragments/Header/Header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { cn } from '$lib/utils';
-	import { ArrowLeft01Icon, ZapIcon } from '@hugeicons/core-free-icons';
+	import { ArrowLeft01Icon, MoreVerticalIcon, ZapIcon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -25,12 +25,19 @@
 		common: cn('flex items-center justify-between p-4'),
 		text: cn([variantClasses[variant].text, ''])
 	});
+
+	const backButtonCallback = () => {
+		window.history.back();
+	};
 </script>
 
 <header {...restProps} class={cn([classes.common, restProps.class])}>
 	<span class="flex items-center gap-2">
 		{#if variant === 'secondary'}
-			<button class="cursor-pointer rounded-full p-2 hover:bg-gray-100" onclick={callback}>
+			<button
+				class="cursor-pointer rounded-full p-2 hover:bg-gray-100"
+				onclick={backButtonCallback}
+			>
 				<HugeiconsIcon icon={ArrowLeft01Icon} size={24} color="var(--color-black-500)" />
 			</button>
 		{/if}
@@ -38,9 +45,13 @@
 			{heading}
 		</h1>
 	</span>
-	{#if callback && variant === 'primary'}
+	{#if callback}
 		<button class="cursor-pointer rounded-full p-2 hover:bg-gray-100" onclick={callback}>
-			<HugeiconsIcon icon={ZapIcon} size={24} color="var(--color-black-500)" />
+			<HugeiconsIcon
+				icon={variant === 'primary' ? ZapIcon : MoreVerticalIcon}
+				size={24}
+				color="var(--color-black-500)"
+			/>
 		</button>
 	{/if}
 </header>

From 11b3eb4069b38044527efc9f0ae7cf05f6803044 Mon Sep 17 00:00:00 2001
From: Sahil Garg <sahil@auvo.io>
Date: Tue, 13 May 2025 14:38:34 +0530
Subject: [PATCH 5/6] chore: cleaned some code.

---
 .../Header/Header.stories.snippet.svelte      |  0
 .../lib/fragments/Header/Header.stories.ts    |  7 ++
 .../src/lib/fragments/Header/Header.svelte    | 67 ++++++++++++++-----
 3 files changed, 56 insertions(+), 18 deletions(-)
 delete mode 100644 platforms/metagram/src/lib/fragments/Header/Header.stories.snippet.svelte

diff --git a/platforms/metagram/src/lib/fragments/Header/Header.stories.snippet.svelte b/platforms/metagram/src/lib/fragments/Header/Header.stories.snippet.svelte
deleted file mode 100644
index e69de29bb..000000000
diff --git a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
index 43230f910..9cc56dfd5 100644
--- a/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
+++ b/platforms/metagram/src/lib/fragments/Header/Header.stories.ts
@@ -43,3 +43,10 @@ export const SecondaryWithMenu = {
         callback: () => alert("menu clicked"),
     },
 };
+
+export const Tertiary = {
+    args: {
+        variant: "tertiary",
+        callback: () => alert("clicked"),
+    },
+};
diff --git a/platforms/metagram/src/lib/fragments/Header/Header.svelte b/platforms/metagram/src/lib/fragments/Header/Header.svelte
index 01cfa1056..1ec12d9d4 100644
--- a/platforms/metagram/src/lib/fragments/Header/Header.svelte
+++ b/platforms/metagram/src/lib/fragments/Header/Header.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
 	import { cn } from '$lib/utils';
-	import { ArrowLeft01Icon, MoreVerticalIcon, ZapIcon } from '@hugeicons/core-free-icons';
+	import {
+		ArrowLeft01Icon,
+		ArrowLeft02Icon,
+		MoreVerticalIcon,
+		ZapIcon
+	} from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	interface IHeaderProps extends HTMLAttributes<HTMLElement> {
-		variant: 'primary' | 'secondary';
-		heading: string;
+		variant: 'primary' | 'secondary' | 'tertiary';
+		heading?: string;
 		callback?: () => void;
 	}
 
@@ -14,16 +19,34 @@
 
 	const variantClasses = {
 		primary: {
-			text: 'text-transparent bg-clip-text bg-[image:var(--color-brand-gradient)]'
+			text: 'text-transparent bg-clip-text bg-[image:var(--color-brand-gradient)]',
+			background: ''
 		},
 		secondary: {
-			text: ''
+			text: '',
+			background: ''
+		},
+		tertiary: {
+			text: '',
+			background: 'bg-white/60'
 		}
 	};
 
+	const backButton = {
+		secondary: ArrowLeft01Icon,
+		tertiary: ArrowLeft02Icon
+	};
+
+	const menuButton = {
+		primary: ZapIcon,
+		secondary: MoreVerticalIcon,
+		tertiary: MoreVerticalIcon
+	};
+
 	const classes = $derived({
 		common: cn('flex items-center justify-between p-4'),
-		text: cn([variantClasses[variant].text, ''])
+		text: variantClasses[variant].text,
+		background: variantClasses[variant].background
 	});
 
 	const backButtonCallback = () => {
@@ -33,25 +56,33 @@
 
 <header {...restProps} class={cn([classes.common, restProps.class])}>
 	<span class="flex items-center gap-2">
-		{#if variant === 'secondary'}
+		{#if variant !== 'primary'}
 			<button
-				class="cursor-pointer rounded-full p-2 hover:bg-gray-100"
+				class={cn([
+					'cursor-pointer rounded-full p-2 hover:bg-gray-100',
+					classes.background
+				])}
 				onclick={backButtonCallback}
 			>
-				<HugeiconsIcon icon={ArrowLeft01Icon} size={24} color="var(--color-black-500)" />
+				<HugeiconsIcon
+					icon={backButton[variant]}
+					size={24}
+					color="var(--color-black-500)"
+				/>
 			</button>
 		{/if}
-		<h1 class={cn([classes.text])}>
-			{heading}
-		</h1>
+		{#if variant !== 'tertiary'}
+			<h1 class={cn([classes.text])}>
+				{heading}
+			</h1>
+		{/if}
 	</span>
 	{#if callback}
-		<button class="cursor-pointer rounded-full p-2 hover:bg-gray-100" onclick={callback}>
-			<HugeiconsIcon
-				icon={variant === 'primary' ? ZapIcon : MoreVerticalIcon}
-				size={24}
-				color="var(--color-black-500)"
-			/>
+		<button
+			class={cn(['cursor-pointer rounded-full p-2 hover:bg-gray-100', classes.background])}
+			onclick={callback}
+		>
+			<HugeiconsIcon icon={menuButton[variant]} size={24} color="var(--color-black-500)" />
 		</button>
 	{/if}
 </header>

From 0eb9b05e03e3de80d221d61b4e5a8a48704a84a4 Mon Sep 17 00:00:00 2001
From: Sahil Garg <sahil@auvo.io>
Date: Tue, 13 May 2025 14:40:58 +0530
Subject: [PATCH 6/6] docs: updated component docs.

---
 platforms/metagram/src/lib/fragments/Header/Header.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/platforms/metagram/src/lib/fragments/Header/Header.svelte b/platforms/metagram/src/lib/fragments/Header/Header.svelte
index 1ec12d9d4..3b117c818 100644
--- a/platforms/metagram/src/lib/fragments/Header/Header.svelte
+++ b/platforms/metagram/src/lib/fragments/Header/Header.svelte
@@ -100,5 +100,9 @@
         import { Header } from "$lib/fragments";
     </script>
 
-    <Header variant="primary" heading="metagram" callback={() => console.log('Header clicked')} />
+    <Header variant="primary" heading="metagram" callback={() => alert("clicked")} />
+    <Header variant="primary" heading="messages" />
+    <Header variant="secondary" heading="Account"  />
+    <Header variant="secondary" heading="Account" callback={() => alert("clicked")} />
+    <Header variant="tertiary" callback={() => alert("clicked")}  />
 -->