Initial commit for iiEasy: all files included

2026-02-03 23:16:16 +05:00
commit 3b3d29e21c
158 changed files with 32962 additions and 0 deletions
--- a/components/ItemDetailNavigation.tsx
+++ b/components/ItemDetailNavigation.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import Button from './Button';
+import { ArrowLeftIcon, ArrowRightIcon } from './icons'; // Assuming these are added to icons.tsx
+
+interface NavigableItem {
+  id: string;
+  title: string;
+}
+
+interface ItemDetailNavigationProps {
+  previousItem?: NavigableItem;
+  nextItem?: NavigableItem;
+  onNavigate: (itemId: string) => void;
+  previousItemButtonLabel: string;
+  nextItemButtonLabel: string;
+  noPreviousItemText: string;
+  noNextItemText: string;
+  themeColorClass?: 'blue' | 'teal' | 'indigo' | 'amber' | 'slate'; 
+}
+
+const ItemDetailNavigation: React.FC<ItemDetailNavigationProps> = ({
+  previousItem,
+  nextItem,
+  onNavigate,
+  previousItemButtonLabel,
+  nextItemButtonLabel,
+  noPreviousItemText,
+  noNextItemText,
+  themeColorClass = 'slate', // Default theme
+}) => {
+  
+  const themeStyles: Record<string, string> = {
+    blue: 'border-blue-500 text-blue-600 hover:bg-blue-50',
+    teal: 'border-teal-500 text-teal-600 hover:bg-teal-50',
+    indigo: 'border-indigo-500 text-indigo-600 hover:bg-indigo-50',
+    amber: 'border-amber-500 text-amber-600 hover:bg-amber-50',
+    slate: 'border-slate-400 text-slate-700 hover:bg-slate-100',
+  }
+  
+  const buttonBaseClasses = themeStyles[themeColorClass] || themeStyles.slate;
+  const disabledClasses = "opacity-50 cursor-not-allowed";
+
+  return (
+    <div className="flex justify-between items-center py-8 my-8 border-t border-b border-slate-200">
+      {previousItem ? (
+        <Button
+          variant="outline"
+          size="md"
+          onClick={() => onNavigate(previousItem.id)}
+          leftIcon={<ArrowLeftIcon className="w-5 h-5" />}
+          className={buttonBaseClasses}
+          aria-label={`${previousItemButtonLabel}: ${previousItem.title}`}
+        >
+          <div className="text-left">
+            <span className="block text-xs uppercase tracking-wider opacity-75">{previousItemButtonLabel}</span>
+            <span className="block font-semibold truncate max-w-[150px] sm:max-w-[200px] md:max-w-[250px]">{previousItem.title}</span>
+          </div>
+        </Button>
+      ) : (
+        <div className={`flex items-center text-sm text-slate-500 ${disabledClasses}`}>
+          <ArrowLeftIcon className="w-5 h-5 mr-2" />
+          {noPreviousItemText}
+        </div>
+      )}
+
+      {nextItem ? (
+        <Button
+          variant="outline"
+          size="md"
+          onClick={() => onNavigate(nextItem.id)}
+          rightIcon={<ArrowRightIcon className="w-5 h-5" />}
+          className={buttonBaseClasses}
+          aria-label={`${nextItemButtonLabel}: ${nextItem.title}`}
+        >
+          <div className="text-right">
+            <span className="block text-xs uppercase tracking-wider opacity-75">{nextItemButtonLabel}</span>
+            <span className="block font-semibold truncate max-w-[150px] sm:max-w-[200px] md:max-w-[250px]">{nextItem.title}</span>
+          </div>
+        </Button>
+      ) : (
+         <div className={`flex items-center text-sm text-slate-500 ${disabledClasses}`}>
+          {noNextItemText}
+          <ArrowRightIcon className="w-5 h-5 ml-2" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ItemDetailNavigation;