add box shadow

src/components/features/ControlPanel/index.svelte

@@ -9,7 +9,10 @@
     type PaddingType,
     roundnessKeys,
     roundnessTypes,
-    type RoundnessType
+    type RoundnessType,
+    dropShadowTypes,
+    type DropShadowType,
+    dropShadowKeys
   } from "~/constants";
   import Button from "../../basic/Button.svelte";
   import Card from "../../basic/Card.svelte";
@@ -34,6 +37,9 @@
     roundnessChange: {
       roundness: RoundnessType;
     };
+    dropShadowChange: {
+      dropShadow: DropShadowType;
+    };
     copy: undefined;
     save: undefined;
   };
@@ -42,6 +48,7 @@
 
   export let padding = paddingTypes.small;
   export let roundness = roundnessTypes.small;
+  export let dropShadow = dropShadowTypes.small;
   export let gradientIndex = 0;
   export let imageSelected = false;
   export let onCopy: () => void | Promise<void> = () => void 0;
@@ -66,6 +73,12 @@
     });
   };
 
+  const selectDropShadowHandler = (dropShadowType: DropShadowType) => {
+    dispatch("dropShadowChange", {
+      dropShadow: dropShadowType
+    });
+  };
+
   const copyHandler = async (event: CustomEvent<{ target: HTMLButtonElement }>) => {
     event.detail.target.disabled = true;
     await onCopy();
@@ -79,7 +92,7 @@
   };
 </script>
 
-<Card class="border border-gray-600 lg:w-3/12 w-full self-start ">
+<Card class="border border-gray-600 lg:w-3/12 w-full self-start">
   <Stack class="gap-8">
     <ControlPanelRow labelIcon={RadiusTopLeftIcon} label="Roundness">
       <div class="gap-3 flex flex-wrap">
@@ -113,14 +126,14 @@
     </ControlPanelRow>
     <ControlPanelRow labelIcon={ShadowIcon} label="Drop Shadow">
       <div class="gap-3 flex flex-wrap">
-        {#each paddingKeys as paddingKey}
+        {#each dropShadowKeys as dropShadowKey}
           <button
             class={clsx("text-white", {
-              "border-b border-white": padding === paddingTypes[paddingKey]
+              "border-b border-white": dropShadow === dropShadowTypes[dropShadowKey]
             })}
-            on:click={() => selectPaddingHandler(paddingKey)}
+            on:click={() => selectDropShadowHandler(dropShadowKey)}
           >
-            {paddingKey.replace(/^\w/, (c) => c.toUpperCase())}
+            {dropShadowKey.replace(/^\w/, (c) => c.toUpperCase())}
           </button>
         {/each}
       </div>

src/components/features/MainBlock/index.svelte

@@ -7,6 +7,7 @@
   export let gradient: string;
   export let padding: string;
   export let roundness: string;
+  export let dropShadow: string;
   export let selectImageUrl: string;
   export let ref: (el: HTMLDivElement) => void;
   export let onImageChange: (e: CustomEvent<{ file: File }>) => void | Promise<void>;
@@ -29,7 +30,8 @@
         src={selectImageUrl}
         class={twMerge(
           "mx-auto overflow-hidden object-cover transition-all duration-300",
-          roundness
+          roundness,
+          dropShadow
         )}
         alt=""
       />

src/constants/index.ts

@@ -1,5 +1,6 @@
 export type PaddingType = "small" | "medium" | "large";
 export type RoundnessType = "none" | "small" | "medium" | "large";
+export type DropShadowType = RoundnessType | "extraLarge";
 
 export const gradients = [
   "bg-gradient-to-l from-violet-700 via-indigo-300 to-cyan-400",
@@ -28,9 +29,10 @@ export const roundnessTypes = {
 
 export const dropShadowTypes = {
   none: "shadow-none",
-  small: "shadow-sm",
-  medium: "shadow-md",
-  large: "shadow-lg"
+  small: "shadow-md shadow-zinc-800/70",
+  medium: "shadow-lg shadow-zinc-800/70",
+  large: "shadow-xl shadow-zinc-800/70",
+  extraLarge: "shadow-2xl shadow-zinc-800/70"
 };
 
 export const paddingKeys = Object.keys(paddingTypes) as PaddingType[];

src/routes/+page.svelte

@@ -2,15 +2,15 @@
   import Stack from "~/components/basic/Stack.svelte";
   import ControlPanel from "~/components/features/ControlPanel/index.svelte";
   import MainBlock from "~/components/features/MainBlock/index.svelte";
-  import ToastSlot from "~/components/features/ToastSlot.svelte";
-  import { gradients, paddingTypes, roundnessTypes } from "~/constants";
+  import { dropShadowTypes, gradients, paddingTypes, roundnessTypes } from "~/constants";
   import { copyImage, domToBlob, downloadFromBlob } from "~/lib";
   import { toastStore } from "~/stores";
 
   let gradientIndex = 0;
   let selectImageUrl = "";
   let padding = paddingTypes.small;
   let roundness = roundnessTypes.small;
+  let dropShadow = dropShadowTypes.small;
   let cardRef: HTMLDivElement;
 
   const changeGradientHandler = (index: number) => {
@@ -39,6 +39,10 @@
     roundness = roundnessTypes[roundnessKey];
   };
 
+  const changeDropShadowHandler = (dropShadowKey: keyof typeof dropShadowTypes) => {
+    dropShadow = dropShadowTypes[dropShadowKey];
+  };
+
   const copyHandler = async () => {
     if (!cardRef || !selectImageUrl) {
       toastStore.show("Please select an image first!", "error", 5000);
@@ -83,12 +87,12 @@
 
 <div class="sm:container lg:min-w-[1300px] mx-auto md:px-0 px-6">
   <Stack>
-    <Stack class="gap-2">
-      <h1 class="text-white text-4xl font-black flex items-center gap-3">
-        <img src="/favicon.png" class="w-12 h-12" alt="Smiiily Logo" />
+    <Stack class="lg:gap-2 gap-0">
+      <h1 class="text-white lg:text-4xl text-3xl font-black flex items-center gap-3">
+        <img src="/favicon.png" class="lg:w-10 lg:h-10 h-8 w-8" alt="Smiiily Logo" />
         Smiiily
       </h1>
-      <h2 class="text-gray-400 text-xl">Gradient Background Image Generator</h2>
+      <h2 class="text-gray-400 lg:text-xl text-lg">Gradient Background Image Generator</h2>
     </Stack>
     <div
       class="min-w-5xl flex lg:flex-row flex-col lg:space-x-10 space-x-0 space-y-10 lg:space-y-0"
@@ -99,16 +103,19 @@
         {gradient}
         {padding}
         {roundness}
+        {dropShadow}
         onImageChange={imageSelectHandler}
       />
       <ControlPanel
         {padding}
         {gradientIndex}
         {roundness}
+        {dropShadow}
         imageSelected={!!selectImageUrl}
         on:paddingChange={({ detail: { padding } }) => changePaddingHandler(padding)}
         on:gradientChange={({ detail: { gradientIndex } }) => changeGradientHandler(gradientIndex)}
         on:roundnessChange={({ detail: { roundness } }) => changeRoundnessHandler(roundness)}
+        on:dropShadowChange={({ detail: { dropShadow } }) => changeDropShadowHandler(dropShadow)}
         onCopy={copyHandler}
         onSave={saveHandler}
         onRemoveImage={removeImageHandler}