feat: variant added

Author: grv-saini-20

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

@@ -11,8 +11,19 @@ export default {
 	})
 };
 
-export const Primary = {
+export const Comment = {
 	args: {
-		placeholder: 'Write your message'
+		variant: 'comment',
+		placeholder: 'Write your comment',
+		handleSend: () => alert('sent')
+	}
+};
+
+export const Dm = {
+	args: {
+		variant: 'dm',
+		placeholder: 'Write your message',
+		handleAdd: () => alert('add'),
+		handleSend: () => alert('sent')
 	}
 };

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

@@ -1,35 +1,63 @@
 <script lang="ts">
 	import { Avatar, Input } from '$lib/ui';
 	import { cn } from '$lib/utils';
-	import { ImageAdd02Icon } from '@hugeicons/core-free-icons';
+	import { ImageAdd02Icon, PlusSignIcon, SentIcon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	interface IMessageInputProps extends HTMLAttributes<HTMLElement> {
+		variant: 'comment' | 'dm';
 		src: string;
 		value: string;
 		placeholder?: string;
 		files?: FileList | undefined;
+		handleAdd?: () => void;
+		handleSend: () => Promise<void>;
 	}
 
 	let {
+		variant = 'comment',
 		src = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
 		value,
 		placeholder,
 		files = $bindable(),
+		handleAdd,
+		handleSend,
 		...restProps
 	}: IMessageInputProps = $props();
 
 	const cBase = 'flex items-center justify-between gap-2';
 </script>
 
 <div {...restProps} class={cn([cBase, restProps.class].join(' '))}>
-	<Avatar size="sm" {src} />
+	{#if variant === 'comment'}
+		<Avatar size="sm" {src} />
+	{:else}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
+			onclick={handleAdd}
+		>
+			<HugeiconsIcon size="24px" icon={PlusSignIcon} color="var(--color-black-400)" />
+		</div>
+	{/if}
 	<Input type="text" bind:value {placeholder} />
-	<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
-		<input id="add-image" type="file" class="hidden" accept="image/*" bind:files />
-		<label for="add-image">
-			<HugeiconsIcon size="24px" icon={ImageAdd02Icon} color="var(--color-black-400)" />
-		</label>
-	</div>
+	{#if value || variant === 'dm'}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
+			onclick={handleSend}
+		>
+			<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />
+		</div>
+	{:else}
+		<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
+			<input id="add-image" type="file" class="hidden" accept="image/*" bind:files />
+			<label for="add-image">
+				<HugeiconsIcon size="24px" icon={ImageAdd02Icon} color="var(--color-black-400)" />
+			</label>
+		</div>
+	{/if}
 </div>