chore: clean up Button component

Author: shinokada

src/lib/buttons/Button.svelte

@@ -17,16 +17,7 @@
 	export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
 	export let icon: typeof SvelteComponent | undefined = undefined;
 	export let gradient: boolean = false;
-	let gradientMonochrome: 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
 
-	let gradientDuoTone:
-		| 'purpleToBlue'
-		| 'cyanToBlue'
-		| 'greenToBlue'
-		| 'purpleToPink'
-		| 'pinkToOrange'
-		| 'tealToLime'
-		| 'redToYellow';
 	export let shadow:
 		| 'blue'
 		| 'green'
@@ -38,7 +29,7 @@
 		| 'purple'
 		| null = null;
 	export let positionInGroup: 'start' | 'middle' | 'end' | null = null;
-	let outlineStyle: 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'white';
+
 	const colorClasses = {
 		blue: 'text-white bg-blue-700 border border-transparent hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 disabled:hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 dark:disabled:hover:bg-blue-600',
 		alternative:

src/lib/footer/Footer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import classNames from 'classnames';
+  // social media
+	export let footerClass: string = 'p-4 bg-white sm:p-6 dark:bg-gray-800';
+// logo footer
+// export let footerClass: string =	'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
+// simple footer
+// export let footerClass: string =	'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800';
+// sitemap
+// export let footerClass: string = 'bg-white dark:bg-gray-800';
+export let footerType:'sitemap'|'simple'|'logo'|'socialmedia'='sitemap'
+const footerClasses={
+  sitemap:{},
+  simple:
+}
+</script>

src/lib/footer/LogoFooter.svelte

@@ -1,23 +1,28 @@
 <script lang="ts">
+	import classNames from 'classnames';
 	import type { LinkType, SiteType } from '../types';
 	export let site: SiteType;
 
 	export let links: LinkType[];
-	export let footerClass: string = 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
+	export let footerClass: string =
+		'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
 	export let divClass: string = 'sm:flex sm:items-center sm:justify-between';
-	export let siteNameClass: string = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
-	export let ulClass: string = 'flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400';
+	export let siteNameClass: string =
+		'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
+	export let ulClass: string =
+		'flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400';
 	export let aClass: string = 'mr-4 hover:underline md:mr-6';
 	export let siteNameLinkClass: string = 'flex items-center mb-4 sm:mb-0';
 	export let imgClass: string = 'mr-3 h-8';
 	export let hrClass: string = 'my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8';
-	export let copyRightSpanClass: string = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
+	export let copyRightSpanClass: string =
+		'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
 	export let copyRightLinkClass: string = 'hover:underline';
 	export let copyrightYear: string = '© 2022';
 	export let allRightsReserved: string = 'All Rights Reserved.';
 </script>
 
-<footer class="{footerClass} {$$props.class ? $$props.class : ''}">
+<footer class={classNames(footerClass, $$props.class)}>
 	<div class={divClass}>
 		<a href={site.href} class={siteNameLinkClass}>
 			<img src={site.img} class={imgClass} alt={site.name} />

src/lib/footer/SimpleFooter.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
+	import classNames from 'classnames';
 	import type { LinkType, SiteType } from '../types';
 	export let site: SiteType;
 	export let links: LinkType[];
-	export let footerClass: string = 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800';
+	export let footerClass: string =
+		'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800';
 	export let siteNameClass: string = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';
 	export let ulClass: string = 'flex flex-wrap items-center mt-3 sm:mt-0';
-	export let aClass: string = 'mr-4 text-sm text-gray-500 hover:underline md:mr-6 dark:text-gray-400';
+	export let aClass: string =
+		'mr-4 text-sm text-gray-500 hover:underline md:mr-6 dark:text-gray-400';
 	export let siteNameLinkClass: string = 'hover:underline';
 	export let copyrightYear: string = '© 2022';
 	export let allRightsReserved: string = 'All Rights Reserved.';
 </script>
 
-<footer class="{footerClass} {$$props.class ? $$props.class : ''}">
+<footer class={classNames(footerClass, $$props.class)}>
 	<span class={siteNameClass}
 		>{copyrightYear}
 		<a href={site.href} class={siteNameLinkClass} target="_blank">{site.name}</a>. {allRightsReserved}

src/lib/footer/SocialMediaFooter.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import classNames from 'classnames';
 	import type { SocialMediaLinkType, SocialMediaType, SiteType } from '../types';
 	export let site: SiteType;
 	export let links: SocialMediaLinkType[];
@@ -7,30 +8,34 @@
 	export let divClass: string = 'md:flex md:justify-between';
 	export let divClass2: string = 'mb-6 md:mb-0';
 	export let siteLinkClass: string = 'flex items-center';
-	export let siteNameSpanClass: string = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
+	export let siteNameSpanClass: string =
+		'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
 	export let imgClass: string = 'mr-3 h-8';
 	export let linksDivClass: string = 'grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3';
-	export let parentClass: string = 'mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white';
+	export let parentClass: string =
+		'mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white';
 	export let ulClass: string = 'text-gray-600 dark:text-gray-400';
 	export let liClass: string = 'mb-4';
 	export let linkClass: string = 'hover:underline';
 	export let hrClass: string = 'my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8';
 	export let copyrightDivClass: string = 'sm:flex sm:items-center sm:justify-between';
 	export let copyrightClass: string = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';
 	export let socialMediaDivClass: string = 'flex mt-4 space-x-6 sm:justify-center sm:mt-0';
-	export let socialMediaLinkClass: string = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
+	export let socialMediaLinkClass: string =
+		'text-gray-500 hover:text-gray-900 dark:hover:text-white';
 	export let iconClass: string = 'h-5 w-5 mr-2';
 	export let copyrightYear: string = '© 2022';
 	export let allRightsReserved: string = 'All Rights Reserved.';
 </script>
 
-<footer class="{footerClass} {$$props.class ? $$props.class : ''}">
+<footer class={classNames(footerClass, $$props.class)}>
 	<div class={divClass}>
 		<div class={divClass2}>
 			<a href={site.href} class={siteLinkClass}>
 				<img src={site.img} class={imgClass} alt={site.name} />
 				<span class={siteNameSpanClass}>{site.name}</span>
 			</a>
+			<slot />
 		</div>
 		<div class={linksDivClass}>
 			{#each links as { parent, children }}