diff --git a/src/components/Button.tsx b/src/components/Button.tsx index a1291e6..cb0afd3 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,9 +1,12 @@ import { ButtonHTMLAttributes, ReactNode } from 'react' +import { Icon } from '@tabler/icons-react' interface ButtonProps extends ButtonHTMLAttributes { variant?: 'primary' | 'secondary' children: ReactNode enabled?: boolean + leftIcon?: Icon + iconSize?: number } export default function Button({ @@ -12,12 +15,14 @@ export default function Button({ className = '', enabled = true, disabled, + leftIcon: LeftIcon, + iconSize = 16, ...props }: ButtonProps) { // Determine if button should be disabled const isDisabled = disabled || !enabled - const baseClasses = 'px-12 py-2 rounded font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 transform' + const baseClasses = `${LeftIcon ? 'px-3 py-2' : 'px-12 py-2'} rounded font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 transform flex items-center justify-center gap-2` const variantClasses = { primary: isDisabled @@ -36,6 +41,7 @@ export default function Button({ disabled={isDisabled} {...props} > + {LeftIcon && } {children} ) diff --git a/src/components/DirectoryList.tsx b/src/components/DirectoryList.tsx index b58f64c..5d71c43 100644 --- a/src/components/DirectoryList.tsx +++ b/src/components/DirectoryList.tsx @@ -1,7 +1,7 @@ 'use client' import { useState, useEffect } from 'react' -import { IconFolder, IconClock, IconTrash } from '@tabler/icons-react' +import { IconFolder, IconClock, IconTrash, IconScan } from '@tabler/icons-react' import { Directory } from '@/types/photo' import Button from "@/components/Button"; @@ -134,8 +134,6 @@ export default function DirectoryList({ onDirectorySelect, selectedDirectory, re
{directory.path}
- -
@@ -151,9 +149,15 @@ export default function DirectoryList({ onDirectorySelect, selectedDirectory, re {formatFileSize(directory.total_size)}
)} + +
+
+
+ +