Feat/metagram message (#135)

* feat: added metagram message component.

* feat: added both states of message component.

* docs: added usage docs.

* chore: exposed component from ui.

* fix: component -> fragement

---------

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

Author: Sahil2004

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

@@ -0,0 +1,35 @@
+import type { ComponentProps } from "svelte";
+import Message from "./Message.svelte";
+
+export default {
+    title: "UI/Message",
+    component: Message,
+    tags: ["autodocs"],
+    render: (args: {
+        Component: Message;
+        props: ComponentProps<typeof Message>;
+    }) => ({
+        Component: Message,
+        props: args,
+    }),
+};
+
+export const Primary = {
+    args: {
+        avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        username: "donaldthefirstt",
+        text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
+        unread: false,
+        callback: () => alert("Message clicked"),
+    },
+};
+
+export const Unread = {
+    args: {
+        avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        username: "donaldthefirstt",
+        text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
+        unread: true,
+        callback: () => alert("Message clicked"),
+    },
+};

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

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Avatar from '../../ui/Avatar/Avatar.svelte';
+	import { cn } from '../../utils';
+
+	interface IMessageProps extends HTMLAttributes<HTMLButtonElement> {
+		avatar: string;
+		username: string;
+		text: string;
+		unread?: boolean;
+		callback: () => void;
+	}
+
+	const {
+		avatar,
+		username,
+		text,
+		unread = false,
+		callback,
+		...restProps
+	}: IMessageProps = $props();
+
+	const messageText = $derived(text.length < 80 ? text : `${text.substring(0, 80)}...`);
+</script>
+
+<button
+	{...restProps}
+	class={cn([
+		'relative flex w-full cursor-pointer items-center gap-2 rounded-lg py-4 hover:bg-gray-100',
+		restProps.class
+	])}
+	onclick={callback}
+>
+	<Avatar src={avatar} alt="User Avatar" size="md" />
+	<span class="flex w-full flex-col items-start justify-end gap-1">
+		<span class="flex w-full items-center justify-between">
+			<h2>{username}</h2>
+			{#if unread}
+				<span class="h-2 w-2 rounded-full bg-blue-500"></span>
+			{/if}
+		</span>
+		<p class="text-black/60">{messageText}</p>
+	</span>
+</button>
+
+<!--
+@component
+@name Message
+@description A message component that displays a user's avatar, username, and message text. It also includes an optional unread indicator.
+@props
+    - avatar: string - The URL of the user's avatar image.
+    - username: string - The name of the user.
+    - text: string - The message text.
+    - unread: boolean - Optional. Indicates if the message is unread. Defaults to false.
+    - callback: () => void - Function to call when the message is clicked.
+@usage
+    <script>
+        import { Message } from '$lib/ui';
+    </script>
+
+    <Message
+        avatar="https://example.com/avatar.jpg"
+        username="John Doe"
+        text="Hello, how are you?"
+        unread={true}
+        callback={() => console.log('Message clicked')}
+    />
+-->

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

@@ -1,6 +1,7 @@
 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';
-export { default as InputFile } from './InputFile/InputFile.svelte';
-export { default as Drawer } from './Drawer/Drawer.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";
+export { default as InputFile } from "./InputFile/InputFile.svelte";
+export { default as Drawer } from "./Drawer/Drawer.svelte";
+export { default as Message } from "./Message/Message.svelte";

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

@@ -1,6 +1,6 @@
-export { default as Button } from './Button/Button.svelte';
-export { default as Avatar } from './Avatar/Avatar.svelte';
-export { default as Input } from './Input/Input.svelte';
-export { default as Select } from './Select/Select.svelte';
-export { default as Label } from './Label/Label.svelte';
-export { default as Toggle } from './Toggle/Toggle.svelte';
+export { default as Button } from "./Button/Button.svelte";
+export { default as Avatar } from "./Avatar/Avatar.svelte";
+export { default as Input } from "./Input/Input.svelte";
+export { default as Select } from "./Select/Select.svelte";
+export { default as Label } from "./Label/Label.svelte";
+export { default as Toggle } from "./Toggle/Toggle.svelte";