Added file upload component

src/components/File/File.sass

@@ -0,0 +1,114 @@
+@use '/src/styles/variables.sass' as vars
+@use 'sass:color'
+
+.filefield
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  height: 200px
+  width: 100%
+  row-gap: 5px
+  border: 1px solid #ffffff6c
+  border-radius: 8px
+
+  &__label
+    color: white
+    font-size: 14px
+    font-weight: 500
+    user-select: none
+
+  &__dropzone
+    display: flex
+    flex-direction: column
+    row-gap: 10px
+    align-items: center
+    justify-content: center
+    width: 100%
+    height: 100%
+    color: #5f8ebe9c
+    cursor: pointer
+    font-size: 1rem
+
+  // &__trigger
+  //   background-color: vars.$primaryColor
+  //   border: none
+  //   border-radius: 8px
+  //   color: white
+  //   padding: 0.5rem 1.25rem
+  //   text-align: center
+  //   text-decoration: none
+  //   display: inline-block
+  //   font-size: 1rem
+  //   font-weight: 500
+  //   cursor: pointer
+  //   transition: all 0.2s ease-out
+
+  //   &:hover
+  //     background-color: color.adjust(vars.$primaryColor, $blackness: 20%)
+
+  //   &:active
+  //     transform: scale(0.95)
+
+  &__itemList
+    display: flex
+    flex-direction: column
+    gap: 3px
+    width: 100%
+
+  &__item
+    width: 82%
+    display: grid
+    // padding: 1rem
+    column-gap: 10px
+    border-radius: 8px
+    grid-template-columns: auto 1fr auto
+    grid-template-areas: "preview name delete" "preview size delete"
+    column-gap: 5px
+    // border: 1px solid rgba(187, 187, 187, 0.706)
+    padding: 10px
+    background-color: #2b4055b7
+    margin: 0 1rem
+
+  &__itemPreview
+    grid-area: preview
+
+  &__itemPreviewImage
+    width: 6rem
+    object-fit: scale-down
+    height: auto
+    aspect-ratio: 1
+
+  &__itemName
+    font-weight: 500
+    grid-area: name
+    font-size: 1rem
+    color: #fff
+
+  &__itemSize
+    grid-area: size
+    font-size: 14px
+    color: rgb(181, 179, 173)
+
+  &__itemDeleteTrigger
+    grid-area: delete
+    background-color: #a23434
+    border: none
+    border-radius: 8px
+    color: white
+    padding: 0.5rem 1.25rem
+    text-align: center
+    text-decoration: none
+    display: inline-block
+    font-size: 1rem
+    font-weight: 500
+    cursor: pointer
+    transition: all 0.2s ease-out
+    height: max-content
+    align-self: center
+
+    &:hover
+      background-color: color.adjust(#a23434, $blackness: 20%)
+
+    &:active
+      transform: scale(0.95)

src/components/File/File.tsx

@@ -0,0 +1,23 @@
+import './File.sass'
+import { FileField } from '@kobalte/core/file-field'
+
+export default () => {
+  return (
+    <>
+      <FileField class="filefield" multiple maxFiles={1} onFileAccept={(data) => console.log('data', data)} onFileReject={(data) => console.log('data', data)} onFileChange={(data) => console.log('data', data)}>
+        <FileField.Dropzone class="filefield__dropzone">Drag and drop file here or click to upload file</FileField.Dropzone>
+        <FileField.HiddenInput />
+        <FileField.ItemList class="filefield__itemList">
+          {() => (
+            <FileField.Item class="filefield__item">
+              <FileField.ItemPreviewImage class="filefield__itemPreviewImage" />
+              <FileField.ItemName class="filefield__itemName" />
+              <FileField.ItemSize class="filefield__itemSize" />
+              <FileField.ItemDeleteTrigger class="filefield__itemDeleteTrigger">Delete</FileField.ItemDeleteTrigger>
+            </FileField.Item>
+          )}
+        </FileField.ItemList>
+      </FileField>
+    </>
+  )
+}

src/components/index.ts

@@ -16,6 +16,7 @@ export { default as Padding } from './Padding/Padding'
 export { default as Modal } from './Modal/Modal'
 export { default as Table } from './Table/Table'
 export { default as Combobox } from './Combobox/Combobox'
+export { default as File } from './File/File'
 
 // export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
 // export { default as OptimizeImage } from './Optimizers/OptimizeImage'