page wrapper

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

@@ -5,6 +5,7 @@ import { StateContainerProps, StateContainerConfig } from './types';
 import { LoadingWrapper } from './LoadingWrapper';
 import { ErrorDisplay } from './ErrorDisplay';
 import { EmptyState } from './EmptyState';
+import { Inbox, AlertCircle, Grid, List } from 'lucide-react';
 
 /**
  * StateContainer Component
@@ -121,7 +122,7 @@ export function StateContainer<T>({
       return (
         <div className={className}>
           <EmptyState
-            icon={require('lucide-react').Inbox}
+            icon={Inbox}
             title="No data available"
             description="There is nothing to display here"
           />
@@ -133,7 +134,7 @@ export function StateContainer<T>({
       <div className={className}>
         <EmptyState
           icon={emptyConfig.icon}
-          title={emptyConfig.title}
+          title={emptyConfig.title || 'No data available'}
           description={emptyConfig.description}
           action={emptyConfig.action}
           variant="default"
@@ -148,7 +149,7 @@ export function StateContainer<T>({
     return (
       <div className={className}>
         <EmptyState
-          icon={require('lucide-react').AlertCircle}
+          icon={AlertCircle}
           title="Unexpected state"
           description="No data available but no error or loading state"
         />
@@ -187,7 +188,7 @@ export function ListStateContainer<T>({
   const listConfig: StateContainerConfig<T[]> = {
     ...config,
     empty: emptyConfig || {
-      icon: require('lucide-react').List,
+      icon: List,
       title: 'No items found',
       description: 'This list is currently empty',
     },
@@ -367,7 +368,7 @@ export function GridStateContainer<T>({
     },
     ...config,
     empty: emptyConfig || {
-      icon: require('lucide-react').Grid,
+      icon: Grid,
       title: 'No items to display',
       description: 'Try adjusting your filters or search',
     },