page wrapper

apps/website/components/shared/state/EmptyState.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { EmptyStateProps } from './types';
+import { EmptyStateProps, EmptyStateAction } from './types';
 import Button from '@/components/ui/Button';
 
 // Illustration components (simple SVG representations)
@@ -81,11 +81,11 @@ export function EmptyState({
           <div className="text-gray-500">
             <IllustrationComponent />
           </div>
-        ) : (
+        ) : Icon ? (
           <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-iron-gray/60 border border-charcoal-outline/50">
             <Icon className="w-8 h-8 text-gray-500" />
           </div>
-        )}
+        ) : null}
       </div>
 
       {/* Title */}
@@ -144,9 +144,11 @@ export function EmptyState({
         >
           <div className="max-w-sm mx-auto space-y-3">
             {/* Minimal icon */}
-            <div className="flex justify-center">
-              <Icon className="w-10 h-10 text-gray-600" />
-            </div>
+            {Icon && (
+              <div className="flex justify-center">
+                <Icon className="w-10 h-10 text-gray-600" />
+              </div>
+            )}
             <h3 className="text-lg font-medium text-gray-300">
               {title}
             </h3>
@@ -182,13 +184,13 @@ export function EmptyState({
                 <div className="text-gray-500 flex justify-center">
                   <IllustrationComponent />
                 </div>
-              ) : (
+              ) : Icon ? (
                 <div className="flex justify-center">
                   <div className="flex h-20 w-20 items-center justify-center rounded-3xl bg-iron-gray/60 border border-charcoal-outline/50">
                     <Icon className="w-10 h-10 text-gray-500" />
                   </div>
                 </div>
-              )}
+              ) : null}
             </div>
             
             <h2 className="text-3xl font-bold text-white mb-4">
@@ -289,10 +291,12 @@ export function FullPageEmptyState({ icon, title, description, action, className
  * Pre-configured empty states for common scenarios
  */
 
+import { Activity, Search, Lock } from 'lucide-react';
+
 export function NoDataEmptyState({ onRetry }: { onRetry?: () => void }) {
   return (
     <EmptyState
-      icon={require('lucide-react').Activity}
+      icon={Activity}
       title="No data available"
       description="There is nothing to display here at the moment"
       action={onRetry ? { label: 'Refresh', onClick: onRetry } : undefined}
@@ -304,7 +308,7 @@ export function NoDataEmptyState({ onRetry }: { onRetry?: () => void }) {
 export function NoResultsEmptyState({ onRetry }: { onRetry?: () => void }) {
   return (
     <EmptyState
-      icon={require('lucide-react').Search}
+      icon={Search}
       title="No results found"
       description="Try adjusting your search or filters"
       action={onRetry ? { label: 'Clear Filters', onClick: onRetry } : undefined}
@@ -316,7 +320,7 @@ export function NoResultsEmptyState({ onRetry }: { onRetry?: () => void }) {
 export function NoAccessEmptyState({ onBack }: { onBack?: () => void }) {
   return (
     <EmptyState
-      icon={require('lucide-react').Lock}
+      icon={Lock}
       title="Access denied"
       description="You don't have permission to view this content"
       action={onBack ? { label: 'Go Back', onClick: onBack } : undefined}