Update README.md to provide a comprehensive overview of the ScriptShare platform, including features, tech stack, setup instructions, admin capabilities, and contribution guidelines.

2025-08-12 22:31:26 +01:00
parent 978b9b26bc
commit aa10ea0b26
64 changed files with 12998 additions and 2 deletions
--- a/src/components/ScriptGrid.tsx
+++ b/src/components/ScriptGrid.tsx
@ -0,0 +1,72 @@
+import { ScriptCard, Script } from './ScriptCard';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface ScriptGridProps {
+  scripts: Script[];
+  isLoading: boolean;
+}
+
+export function ScriptGrid({ scripts, isLoading }: ScriptGridProps) {
+  if (isLoading) {
+    return (
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        {Array.from({ length: 8 }).map((_, index) => (
+          <ScriptCardSkeleton key={index} />
+        ))}
+      </div>
+    );
+  }
+
+  if (scripts.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <div className="text-muted-foreground text-lg">
+          No scripts found matching your criteria.
+        </div>
+        <div className="text-sm text-muted-foreground mt-2">
+          Try adjusting your filters or search terms.
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+      {scripts.map((script) => (
+        <ScriptCard key={script.id} script={script} />
+      ))}
+    </div>
+  );
+}
+
+function ScriptCardSkeleton() {
+  return (
+    <div className="border rounded-lg p-6 space-y-4">
+      <div className="space-y-2">
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-2/3" />
+      </div>
+      
+      <div className="flex flex-wrap gap-2">
+        <Skeleton className="h-6 w-16 rounded-full" />
+        <Skeleton className="h-6 w-20 rounded-full" />
+      </div>
+      
+      <div className="flex flex-wrap gap-2">
+        <Skeleton className="h-6 w-24 rounded-full" />
+        <Skeleton className="h-6 w-20 rounded-full" />
+      </div>
+      
+      <div className="flex justify-between text-sm">
+        <Skeleton className="h-4 w-20" />
+        <Skeleton className="h-4 w-16" />
+      </div>
+      
+      <div className="flex space-x-2 pt-2">
+        <Skeleton className="h-9 flex-1" />
+        <Skeleton className="h-9 w-9" />
+      </div>
+    </div>
+  );
+}