fix: code format and as per svelte 5

Author: grv-saini-20

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

@@ -1,21 +1,36 @@
 <script lang="ts">
-	let countries = [
-		{ code: '+41', flag: '🇬🇧', name: 'United Kingdom' },
-		{ code: '+49', flag: '🇩🇪', name: 'Germany' },
-		{ code: '+33', flag: '🇫🇷', name: 'France' }
-		// Add more as needed
-	];
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
 
-	let selectedCode = countries[0].code;
+	interface ISelectProps extends HTMLAttributes<HTMLElement> {
+		options: Array<{
+			code: string;
+			flag: string;
+			name: string;
+		}>;
+	}
+
+	let {
+		options = [
+			{ code: '+41', flag: '🇬🇧', name: 'United Kingdom' },
+			{ code: '+49', flag: '🇩🇪', name: 'Germany' },
+			{ code: '+33', flag: '🇫🇷', name: 'France' }
+		],
+		...restProps
+	}: ISelectProps = $props();
+
+	let selectedCode = $state(options[0].code);
+
+	const cBase = 'bg-grey flex w-[max-content] items-center space-x-2 rounded-full p-1.5';
 </script>
 
-<div class="bg-grey flex w-[max-content] items-center space-x-2 rounded-full p-1.5">
-	<div class="rounded-full text-xl">{countries.find((c) => c.code === selectedCode)?.flag}</div>
+<div {...restProps} class={cn([cBase, restProps.class].join(' '))}>
+	<div class="rounded-full text-xl">{options.find((c) => c.code === selectedCode)?.flag}</div>
 	<select
 		bind:value={selectedCode}
 		class="text-md focus:ring-2 focus:ring-transparent focus:outline-none"
 	>
-		{#each countries as country}
+		{#each options as country}
 			<option value={country.code} class="text-md text-black-600">
 				{country.code}
 			</option>