Feat/metagram header (#133)

* feat: added metagram header primary linear gradient.

* feat: added flash icon.

* feat: added secondary state of header.

* feat: added secondary state of header with menu.

* chore: cleaned some code.

* docs: updated component docs.

---------

Co-authored-by: SoSweetHam <[email protected]>

Author: Sahil2004

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

@@ -0,0 +1,52 @@
+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",
+        callback: () => alert("clicked"),
+    },
+};
+
+export const PrimaryWithNoFlash = {
+    args: {
+        variant: "primary",
+        heading: "messages",
+    },
+};
+
+export const Secondary = {
+    args: {
+        variant: "secondary",
+        heading: "Account",
+    },
+};
+
+export const SecondaryWithMenu = {
+    args: {
+        variant: "secondary",
+        heading: "Account",
+        callback: () => alert("menu clicked"),
+    },
+};
+
+export const Tertiary = {
+    args: {
+        variant: "tertiary",
+        callback: () => alert("clicked"),
+    },
+};

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

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	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' | 'tertiary';
+		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)]',
+			background: ''
+		},
+		secondary: {
+			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: variantClasses[variant].text,
+		background: variantClasses[variant].background
+	});
+
+	const backButtonCallback = () => {
+		window.history.back();
+	};
+</script>
+
+<header {...restProps} class={cn([classes.common, restProps.class])}>
+	<span class="flex items-center gap-2">
+		{#if variant !== 'primary'}
+			<button
+				class={cn([
+					'cursor-pointer rounded-full p-2 hover:bg-gray-100',
+					classes.background
+				])}
+				onclick={backButtonCallback}
+			>
+				<HugeiconsIcon
+					icon={backButton[variant]}
+					size={24}
+					color="var(--color-black-500)"
+				/>
+			</button>
+		{/if}
+		{#if variant !== 'tertiary'}
+			<h1 class={cn([classes.text])}>
+				{heading}
+			</h1>
+		{/if}
+	</span>
+	{#if callback}
+		<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>
+
+<!--
+@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={() => 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")}  />
+-->

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

@@ -1,3 +1,4 @@
+export { default as Header } from "./Header/Header.svelte";
 export { default as BottomNav } from './BottomNav/BottomNav.svelte';
 export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
 export { default as MessageInput } from './MessageInput/MessageInput.svelte';

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>