settings page buttons

Author: ananyayaya129

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

@@ -10,8 +10,15 @@
 		Notification02FreeIcons
 	} from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let route = $derived(page.url.pathname);
+
+	interface ISettingsPageProps extends HTMLAttributes<HTMLElement> {
+		username: string;
+		userEmail: string;
+	}
+	let { username, userEmail }: ISettingsPageProps = $props();
 </script>
 
 <div class="bg-grey rounded-xl p-3 md:p-5">
@@ -21,8 +28,8 @@
 	>
 		{#snippet children()}
 			<div class="flex flex-col items-start">
-				<h2 class="text-lg">_.ananyayaya._</h2>
-				<p class="text-sm">ananya@auvo.io</p>
+				<h2 class="text-lg">{username}</h2>
+				<p class="text-sm">{userEmail}</p>
 			</div>
 		{/snippet}
 	</SettingsNavigationButton>

platforms/metagram/src/lib/fragments/SettingsRightAside/Account.svelte

@@ -0,0 +1,7 @@
+<script context="module">
+	export { HelperText };
+</script>
+
+{#snippet HelperText()}
+	this is label
+{/snippet}

platforms/metagram/src/lib/fragments/SettingsRightAside/Aside.svelte

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