feat: added settings tile component. (#184)

* feat: added settings tile component.

* chore: fixed the naming convention

* chore: renamed callback to onclick

* fix: fixed the use of restProps

* fix: fixed the unnecessary onclick expose.

* fix: fixed the join function params.

Author: Sahil2004

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

@@ -0,0 +1,23 @@
+import type { ComponentProps } from "svelte";
+import SettingsTile from "./SettingsTile.svelte";
+
+export default {
+    title: "UI/SettingsTile",
+    component: SettingsTile,
+    tags: ["autodocs"],
+    render: (args: {
+        Component: SettingsTile;
+        props: ComponentProps<typeof SettingsTile>;
+    }) => ({
+        Component: SettingsTile,
+        props: args,
+    }),
+};
+
+export const Primary = {
+    args: {
+        title: "Who can see your posts?",
+        currentStatus: "Only followers",
+        onclick: () => alert("clicked"),
+    },
+};

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	interface ISettingsTile extends HTMLButtonAttributes {
+		title: string;
+		currentStatus: 'string';
+	}
+
+	const { title, currentStatus, ...restProps }: ISettingsTile = $props();
+</script>
+
+<button
+	{...restProps}
+	class={cn(
+		['flex w-full cursor-pointer items-center justify-between', restProps.class].join(' ')
+	)}
+>
+	<div class="flex flex-col items-start gap-1">
+		<span class="font-semibold">{title}</span>
+		<span class="text-black/60">{currentStatus}</span>
+	</div>
+	<HugeiconsIcon icon={ArrowRight01Icon} className="text-black/40" />
+</button>

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

@@ -1,19 +1,20 @@
-export { default as Profile } from './Profile/Profile.svelte';
-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 Message } from './Message/Message.svelte';
-export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte';
-export { default as Modal } from './Modal/Modal.svelte';
-export { default as SideBar } from './SideBar/SideBar.svelte';
-export { default as RightAside } from './RightAside/RightAside.svelte';
-export { default as SettingsToggleButton } from './SettingsToggleButton/SettingsToggleButton.svelte';
-export { default as Post } from './Post/Post.svelte';
-export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
-export { default as Comment } from './Comment/Comment.svelte';
-export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';
-export { default as UserRequest } from './UserRequest/UserRequest.svelte';
-export { default as UploadedPostView } from './UploadedPostView/UploadedPostView.svelte';
+export { default as Profile } from "./Profile/Profile.svelte";
+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 Message } from "./Message/Message.svelte";
+export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte";
+export { default as Modal } from "./Modal/Modal.svelte";
+export { default as SideBar } from "./SideBar/SideBar.svelte";
+export { default as RightAside } from "./RightAside/RightAside.svelte";
+export { default as SettingsToggleButton } from "./SettingsToggleButton/SettingsToggleButton.svelte";
+export { default as Post } from "./Post/Post.svelte";
+export { default as ChatMessage } from "./ChatMessage/ChatMessage.svelte";
+export { default as Comment } from "./Comment/Comment.svelte";
+export { default as SettingsDeleteButton } from "./SettingsDeleteButton/SettingsDeleteButton.svelte";
+export { default as SettingsTile } from "./SettingsTile/SettingsTile.svelte";
+export { default as UserRequest } from "./UserRequest/UserRequest.svelte";
+export { default as UploadedPostView } from "./UploadedPostView/UploadedPostView.svelte";