feat: created connection button (#48)

* created connection button

* added restprops to parent class

* added onClick btn and storybook

Author: Ananya Rana

infrastructure/eid-wallet/.storybook/preview.ts

@@ -1,14 +1,15 @@
-import type { Preview } from '@storybook/svelte'
+import type { Preview } from "@storybook/svelte";
+import "../src/app.css";
 
 const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
-      },
-    },
-  },
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
 };
 
-export default preview;
+export default preview;

infrastructure/eid-wallet/src/lib/ui/Connection/Connection.stories.ts

@@ -0,0 +1,22 @@
+import Connection from "./Connection.svelte";
+
+export default {
+	title: "UI/Connection",
+	component: Connection,
+	tags: ["autodocs"],
+	render: (args: any) => ({
+		Component: Connection,
+		props: args,
+	}),
+};
+
+export const Primary = {
+	args: {
+		imgSrc:
+			"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGPvo_J4nWlDM0kxFW0rsfR5UeOOC6uMvpfQ&s",
+		connectionName: "Facebook.com",
+		lastConnected:
+			new Date().toDateString() + ", " + new Date().toLocaleTimeString(),
+		onClick: () => alert("Disconnected!"),
+	},
+};

infrastructure/eid-wallet/src/lib/ui/Connection/Connection.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    interface IConnection extends HTMLAttributes<HTMLElement>{
+        imgSrc: string;
+        connectionName: string;
+        lastConnected: Date;
+        onClick?: () => void;
+    }
+
+    let { imgSrc, connectionName, lastConnected, onClick, ...restProps}: IConnection = $props();
+
+</script>
+
+<div {...restProps} class={cn("flex items-center justify-between px-3 py-2", restProps.class)}>
+    <div class="flex items-center gap-2">
+        <div class="p-3 bg-gray-900 max-w-max rounded-4xl object-cover flex items-center">
+            <img class="size-6" src={imgSrc} alt={connectionName}>
+        </div>
+        <div>
+            <h2 class="text-md font-medium text-black-900">{connectionName}</h2>
+            <p class="text-xs text-black-700">Last Active {lastConnected}</p>
+        </div>
+    </div>
+    <button 
+        class="p-2 text-md font-semibold text-primary-900"
+        onclick={onClick}
+
+    >
+            Disconnect
+    </button>
+</div>