feat: message-input

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

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

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Avatar, Input } from '$lib/ui';
+	import { ImageAdd02Icon } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IMessageInputProps extends HTMLAttributes<HTMLElement> {
+		src: string;
+		value: string;
+		placeholder?: string;
+	}
+
+	let {
+		src = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		value,
+		placeholder
+	}: IMessageInputProps = $props();
+
+	let files: FileList | undefined = $state();
+
+	$effect(() => {
+		console.log(files);
+	});
+</script>
+
+<div class="flex items-center justify-between gap-2">
+	<Avatar size="sm" {src} />
+	<Input type="text" bind:value placeholder="Type your message" />
+	<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>
+</div>

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

@@ -1 +1,2 @@
 export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
+export { default as MessageInput } from './MessageInput/MessageInput.svelte';

platforms/metagram/src/lib/ui/Input/Input.svelte

@@ -5,10 +5,10 @@
 	interface IInputProps extends HTMLInputAttributes {
 		type: 'text' | 'number' | 'email' | 'tel' | 'password';
 		value: string | number;
-		placeholder: string;
-		isRequired: boolean;
-		isDisabled: boolean;
-		isError: boolean;
+		placeholder?: string;
+		isRequired?: boolean;
+		isDisabled?: boolean;
+		isError?: boolean;
 	}
 
 	let {