feat: add Pagination component for video list navigation

- Implemented a reusable Pagination component with first/last, previous/next, and numbered page buttons.
- Added PageInfo component to display current page and total items.
- Integrated pagination into VideoList component, allowing users to navigate through video pages.
- Updated useVideoList hook to manage current page and total pages state.
- Modified videoApi service to support pagination with offset-based API.
- Enhanced VideoCard styling for better UI consistency.
- Updated Tailwind CSS configuration to include custom colors and shadows for branding.
- Refactored video file settings to use 'h264' codec for better compatibility.

tailwind.config.js

@@ -5,7 +5,92 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        brand: {
+          25: '#f2f7ff',
+          50: '#ecf3ff',
+          100: '#dde9ff',
+          200: '#c2d6ff',
+          300: '#9cb9ff',
+          400: '#7592ff',
+          500: '#465fff',
+          600: '#3641f5',
+          700: '#2a31d8',
+          800: '#252dae',
+          900: '#262e89',
+          950: '#161950',
+        },
+        gray: {
+          25: '#fcfcfd',
+          50: '#f9fafb',
+          100: '#f2f4f7',
+          200: '#e4e7ec',
+          300: '#d0d5dd',
+          400: '#98a2b3',
+          500: '#667085',
+          600: '#475467',
+          700: '#344054',
+          800: '#1d2939',
+          900: '#101828',
+          950: '#0c111d',
+        },
+        success: {
+          25: '#f6fef9',
+          50: '#ecfdf3',
+          100: '#d1fadf',
+          200: '#a6f4c5',
+          300: '#6ce9a6',
+          400: '#32d583',
+          500: '#12b76a',
+          600: '#039855',
+          700: '#027a48',
+          800: '#05603a',
+          900: '#054f31',
+          950: '#053321',
+        },
+        error: {
+          25: '#fffbfa',
+          50: '#fef3f2',
+          100: '#fee4e2',
+          200: '#fecdca',
+          300: '#fda29b',
+          400: '#f97066',
+          500: '#f04438',
+          600: '#d92d20',
+          700: '#b42318',
+          800: '#912018',
+          900: '#7a271a',
+          950: '#55160c',
+        },
+        warning: {
+          25: '#fffcf5',
+          50: '#fffaeb',
+          100: '#fef0c7',
+          200: '#fedf89',
+          300: '#fec84b',
+          400: '#fdb022',
+          500: '#f79009',
+          600: '#dc6803',
+          700: '#b54708',
+          800: '#93370d',
+          900: '#7a2e0e',
+          950: '#4e1d09',
+        },
+      },
+      boxShadow: {
+        'theme-xs': '0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
+        'theme-sm': '0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06)',
+        'theme-md': '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
+        'theme-lg': '0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)',
+        'theme-xl': '0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03)',
+      },
+      fontSize: {
+        'theme-xs': ['12px', '18px'],
+        'theme-sm': ['14px', '20px'],
+        'theme-xl': ['20px', '30px'],
+      },
+    },
   },
   plugins: [],
 }