Flutter File Upload Card with Progress Bars

WDiv(
  className: 'max-w-sm w-full mx-auto p-5 rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
  children: [
    WText(
      'Upload Files',
      className: 'text-gray-900 dark:text-white text-lg font-bold'
    ),
    WText(
      'Drag and drop or browse to upload',
      className: 'text-gray-400 dark:text-gray-500 text-xs mb-4'
    ),
    WButton(
      className: 'w-full p-6 rounded-2xl border-2 border-indigo-200 dark:border-indigo-800 bg-indigo-50 dark:bg-indigo-950 mb-4',
      child: WDiv(
        className: 'flex flex-col items-center w-full',
        children: [
          WDiv(
            className: 'w-12 h-12 rounded-full bg-white dark:bg-gray-900 flex flex-row items-center justify-center mb-2',
            child: WIcon(
              Icons.cloud,
              className: 'text-indigo-600 dark:text-indigo-400 text-2xl'
            ),
          ),
          WText(
            'Drop files here',
            className: 'text-gray-900 dark:text-white text-sm font-semibold'
          ),
          WText(
            'PNG, PDF up to 25MB',
            className: 'text-gray-400 dark:text-gray-500 text-xs'
          ),
        ],
      ),
    ),
    WDiv(
      className: 'w-full p-3 rounded-2xl bg-gray-50 dark:bg-gray-800 mb-3',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-between w-full mb-2',
          children: [
            WDiv(
              className: 'flex flex-row items-center',
              children: [
                WDiv(
                  className: 'w-10 h-10 rounded-xl bg-rose-100 dark:bg-rose-950 flex flex-row items-center justify-center mr-3',
                  child: WText(
                    'PDF',
                    className: 'text-rose-600 dark:text-rose-400 text-xs font-bold'
                  ),
                ),
                WDiv(
                  className: 'flex flex-col',
                  children: [
                    WText(
                      'Q3-Proposal.pdf',
                      className: 'text-gray-900 dark:text-white text-sm font-semibold'
                    ),
                    WText(
                      '2.4 MB',
                      className: 'text-gray-400 dark:text-gray-500 text-xs'
                    ),
                  ],
                ),
              ],
            ),
            WText(
              '60%',
              className: 'text-indigo-600 dark:text-indigo-400 text-xs font-bold'
            ),
          ],
        ),
        WDiv(
          className: 'h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700',
          child: WDiv(
            className: 'h-2 w-3/5 rounded-full bg-indigo-600 dark:bg-indigo-500',
            children: []
          ),
        ),
      ],
    ),
    WDiv(
      className: 'w-full p-3 rounded-2xl bg-gray-50 dark:bg-gray-800',
      children: [
        WDiv(
          className: 'flex flex-row items-center justify-between w-full mb-2',
          children: [
            WDiv(
              className: 'flex flex-row items-center',
              children: [
                WDiv(
                  className: 'w-10 h-10 rounded-xl bg-emerald-100 dark:bg-emerald-950 flex flex-row items-center justify-center mr-3',
                  child: WText(
                    'IMG',
                    className: 'text-emerald-600 dark:text-emerald-400 text-xs font-bold'
                  ),
                ),
                WDiv(
                  className: 'flex flex-col',
                  children: [
                    WText(
                      'cover-art.png',
                      className: 'text-gray-900 dark:text-white text-sm font-semibold'
                    ),
                    WText(
                      '860 KB',
                      className: 'text-gray-400 dark:text-gray-500 text-xs'
                    ),
                  ],
                ),
              ],
            ),
            WIcon(
              Icons.check,
              className: 'text-emerald-500 dark:text-emerald-400 text-lg'
            ),
          ],
        ),
        WDiv(
          className: 'h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700',
          child: WDiv(
            className: 'h-2 w-full rounded-full bg-emerald-500 dark:bg-emerald-400',
            children: []
          ),
        ),
      ],
    ),
  ],
)