feat(Dropfile): config redesign and implementation

shuriken-ui · Dec 6, 2023 · 2e78245 · 2e78245
1 parent a793e75
commit 2e78245
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 11 deletions.
diff --git a/src/plugins/components/fullscreen-dropfile/fullscreen-dropfile.config.ts b/src/plugins/components/fullscreen-dropfile/fullscreen-dropfile.config.ts
@@ -1,14 +1,28 @@
 export const key = 'fullscreenDropfile' as const
 
 export const defaultConfig = {
-  border: 'primary-500',
   height: '[230px]',
   width: '[500px]',
+  rounded: 'rounded-md',
+  label: {
+    font: {
+      size: 'base',
+    },
+  },
   icon: {
-    text: 'primary-500',
-    textSize: '6xl',
+    size: '10',
+    font: {
+      size: '6xl',
+      color: {
+        light: 'primary-500',
+        dark: 'primary-500',
+      },
+    },
+  },
+  border: {
+    light: 'muted-200',
+    dark: 'muted-700',
   },
-  labelTextSize: 'base',
 }
 
 export type FullscreenDropfileConfig = typeof defaultConfig

diff --git a/src/plugins/components/fullscreen-dropfile/index.ts b/src/plugins/components/fullscreen-dropfile/index.ts
@@ -21,27 +21,37 @@ export default plugin.withOptions(
       ) satisfies FullscreenDropfileConfig
 
       addComponents({
+        //Wrapper
         [`.${prefix}fullscreen-dropfile`]: {
+          //Dropfile:outer
           [`.${prefix}fullscreen-dropfile-outer`]: {
-            [`@apply bg-muted-200/20 dark:bg-muted-800/20 fixed inset-0 z-40 backdrop-blur-sm transition-all hover:backdrop-blur-none`]:
+            [`@apply bg-muted-100/50 dark:bg-muted-800/20 fixed inset-0 z-40 backdrop-blur-sm transition-all hover:backdrop-blur-none`]:
               {},
           },
+          //Dropfile:inner
           [`.${prefix}fullscreen-dropfile-inner`]: {
             [`@apply fixed inset-0 z-50`]: {},
-
+            //Dropfile:container
             [`.${prefix}fullscreen-dropfile-container`]: {
               [`@apply flex h-full flex-1 items-center justify-center`]: {},
-
+              //Dropfile:content
               [`.${prefix}fullscreen-dropfile-content`]: {
-                [`@apply border-${config.border} bg-muted-200 dark:bg-muted-800 mx-auto flex h-${config.height} w-${config.width} flex-col items-center justify-center gap-6 rounded border drop-shadow-sm`]:
+                [`@apply h-${config.height} w-${config.width} mx-auto flex flex-col items-center justify-center gap-6 drop-shadow-sm`]:
                   {},
-
+                //Background
+                [`@apply bg-muted-100 dark:bg-muted-800`]: {},
+                //Border
+                [`@apply ${config.rounded} border-2 border-dashed border-${config.border.light} dark:border-${config.border.dark}`]:
+                  {},
+                //Icon
                 [`.${prefix}fullscreen-dropfile-icon`]: {
-                  [`@apply text-${config.icon.text} text-${config.icon.textSize}`]:
+                  [`@apply h-${config.icon.size} w-${config.icon.size} text-${config.icon.font.color.light} dark:text-${config.icon.font.color.dark}`]:
                     {},
                 },
+                //Label
                 [`.${prefix}fullscreen-dropfile-label`]: {
-                  [`@apply text-${config.labelTextSize}`]: {},
+                  [`@apply text-${config.label.font.size} text-muted-500 dark:text-muted-400`]:
+                    {},
                 },
               },
             },