Add responsive design

src/utils/responsive.ts

@@ -0,0 +1,93 @@
+/**
+ * Responsive utility functions
+ * Centralized helpers for responsive behavior
+ */
+
+/**
+ * Get responsive class names based on condition
+ */
+export function responsiveClass(
+  base: string,
+  mobile?: string,
+  tablet?: string,
+  desktop?: string
+): string {
+  const classes = [base];
+  
+  if (mobile) classes.push(`max-md:${mobile}`);
+  if (tablet) classes.push(`md:${tablet} max-lg:${tablet}`);
+  if (desktop) classes.push(`lg:${desktop}`);
+  
+  return classes.join(' ');
+}
+
+/**
+ * Get responsive value based on screen width
+ */
+export function getResponsiveValue<T>(
+  mobile: T,
+  tablet: T,
+  desktop: T,
+  width: number
+): T {
+  if (width < 768) return mobile;
+  if (width < 1024) return tablet;
+  return desktop;
+}
+
+/**
+ * Debounce function for resize events
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout;
+  
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
+
+/**
+ * Check if device supports touch
+ */
+export function isTouchDevice(): boolean {
+  return (
+    'ontouchstart' in window ||
+    navigator.maxTouchPoints > 0 ||
+    (navigator as any).msMaxTouchPoints > 0
+  );
+}
+
+/**
+ * Get optimal column count for grid based on width
+ */
+export function getGridColumns(width: number, itemMinWidth: number = 300): number {
+  return Math.max(1, Math.floor(width / itemMinWidth));
+}
+
+/**
+ * Format text for mobile (truncate if needed)
+ */
+export function formatTextForMobile(
+  text: string,
+  maxLength: number = 100,
+  isMobile: boolean
+): string {
+  if (!isMobile || text.length <= maxLength) return text;
+  return text.substring(0, maxLength) + '...';
+}
+
+/**
+ * Get responsive font size
+ */
+export function getResponsiveFontSize(
+  baseSize: number,
+  width: number
+): number {
+  if (width < 768) return baseSize * 0.875; // 87.5% for mobile
+  if (width < 1024) return baseSize * 0.9375; // 93.75% for tablet
+  return baseSize;
+}