fix: replace default object with derived

Author: shinokada

src/lib/ForgotPassword.svelte

@@ -6,12 +6,7 @@
   let {
     children,
     title = 'Forgot your password?',
-    site = {
-      name: 'Flowbite',
-      img: '/images/flowbite-svelte-icon-logo.svg',
-      link: '/',
-      imgAlt: 'FlowBite Logo'
-    },
+    site,
     btnTitle = 'Reset password',
     pageDescription = "Don't fret! Just type in your email and we will send you a code to reset your password!",
     mainClass = 'bg-gray-50 dark:bg-gray-900',
@@ -22,17 +17,25 @@
     ...restProps
   }: ForgotPasswordProps = $props();
 
+  const siteDefault = {
+      name: 'Flowbite',
+      img: '/images/flowbite-svelte-icon-logo.svg',
+      link: '/',
+      imgAlt: 'FlowBite Logo'
+    };
+  const actualSite = $derived(site ?? siteDefault);
+
   const mainDivCls = twMerge('flex flex-col items-center justify-center px-6 pt-8 mx-auto md:h-screen pt:mt-0 dark:bg-gray-900', mainDivClass);
   const siteLinkCls = twMerge('flex items-center justify-center mb-8 text-2xl font-semibold lg:mb-10 dark:text-white', siteLinkClass);
   const cardH1Cls = twMerge('mb-3 text-2xl font-bold text-gray-900 dark:text-white', cardH1Class);
 </script>
 
 <main class={mainClass}>
   <div class={mainDivCls}>
-    {#if site}
-      <a href={site.link} class={siteLinkCls}>
-        <img src={site.img} class={siteImgClass} alt={site.imgAlt} />
-        <span>{site.name}</span>
+    {#if actualSite}
+      <a href={actualSite.link} class={siteLinkCls}>
+        <img src={actualSite.img} class={siteImgClass} alt={actualSite.imgAlt} />
+        <span>{actualSite.name}</span>
       </a>
     {/if}
     <!-- Card -->

src/lib/Maintenance.svelte

@@ -7,10 +7,7 @@
   let {
     title = 'Under Maintenance',
     description = 'Sorry for the inconvenience but we’re performing some maintenance at the moment. If you need to you can always <a href="/" class="text-primary-700 hover:underline dark:text-primary-500">contact us</a>, otherwise we’ll be back online shortly!.',
-    image = {
-      src: imagesPath('illustrations/maintenance.svg'),
-      alt: 'maintenance'
-    },
+    image,
     btnTitle = 'Go back home',
     btnHref = '/',
     mainClass = 'bg-gray-50 dark:bg-gray-900',
@@ -20,14 +17,20 @@
     div2Class = 'text-center xl:max-w-4xl'
   }: MaintenanceProps = $props();
 
+  const imageDefault = {
+      src: imagesPath('illustrations/maintenance.svg'),
+      alt: 'maintenance'
+    }
+  const actualImage = $derived( image ?? imageDefault);
+
   const mainDivCls = twMerge('flex flex-col justify-center items-center px-6 mx-auto h-screen xl:px-0 dark:bg-gray-900', mainDivClass);
   const h1Cls = twMerge('mb-3 text-2xl font-bold leading-tight text-gray-900 sm:text-4xl lg:text-5xl dark:text-white', h1Class);
 </script>
 
 <main class={mainClass}>
   <div class={mainDivCls}>
     <div class={imgDiv}>
-      <img src={image.src} alt={image.alt} />
+      <img src={actualImage.src} alt={actualImage.alt} />
     </div>
     <div class={div2Class}>
       <h1 class={h1Cls}>{title}</h1>

src/lib/NotFound.svelte

@@ -7,10 +7,7 @@
   let {
     title = 'Page not found',
     description = 'Oops! Looks like you followed a bad link. If you think this is a problem with us, please	tell us.',
-    image = {
-      src: imagesPath('404.svg', 'illustrations'),
-      alt: 'astronaut'
-    },
+    image,
     btnTitle = 'Go back home',
     btnHref = '/',
     mainClass = 'bg-gray-50 dark:bg-gray-900',
@@ -20,14 +17,20 @@
     div2Class = 'text-center xl:max-w-4xl'
   }: NotFoundProps = $props();
 
+  const imageDefault = {
+      src: imagesPath('404.svg', 'illustrations'),
+      alt: 'astronaut'
+    }
+  const actualImage = $derived( image ?? imageDefault);
+
   const mainDivCls = twMerge('flex flex-col items-center justify-center px-6 pt-8 mx-auto md:h-screen pt:mt-0 dark:bg-gray-900', mainDivClass);
   const h1Cls = twMerge('mb-3 text-2xl font-bold leading-tight text-gray-900 sm:text-4xl lg:text-5xl dark:text-white', h1Class);
 </script>
 
 <main class={mainClass}>
   <div class={mainDivCls}>
     <div class={imgDiv}>
-      <img src={image.src} alt={image.alt} />
+      <img src={actualImage.src} alt={actualImage.alt} />
     </div>
     <div class={div2Class}>
       <h1 class={h1Cls}>

src/lib/ServerError.svelte

@@ -7,10 +7,7 @@
   let {
     title = 'Something has gone seriously wrong',
     description = "It's always time for a coffee break. We should be back by the time you finish your coffee.",
-    image = {
-      src: imagesPath('illustrations/500.svg'),
-      alt: 'astronaut'
-    },
+    image,
     btnTitle = 'Go back home',
     btnHref = '/',
     mainClass = 'bg-gray-50 dark:bg-gray-900',
@@ -20,14 +17,20 @@
     div2Class = 'text-center xl:max-w-4xl'
   }: ServerErrorProps = $props();
 
+  const imageDefault = {
+      src: imagesPath('illustrations/500.svg'),
+      alt: 'astronaut'
+    }
+  const actualImage = $derived( image ?? imageDefault);
+
   const mainDivCls = twMerge('flex flex-col justify-center items-center px-6 mx-auto h-screen xl:px-0 dark:bg-gray-900', mainDivClass);
   const h1Cls = twMerge('mb-3 text-2xl font-bold leading-tight text-gray-900 sm:text-4xl lg:text-5xl dark:text-white', h1Class);
 </script>
 
 <main class={mainClass}>
   <div class={mainDivCls}>
     <div class={imgDiv}>
-      <img src={image.src} alt={image.alt} />
+      <img src={actualImage.src} alt={actualImage.alt} />
     </div>
     <div class={div2Class}>
       <h1 class={h1Cls}>