Spaces:
Running
Running
File size: 4,475 Bytes
72f0edb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
import React from "react";
import Header from "../components/Header";
import Carousel from "../components/Carousel";
import { ContentItem } from "../lib/types";
import ChatWindow from "../components/ChatWindow";
import { useUrdfs, useCategories } from "@/hooks/useUrdfData";
import { Skeleton } from "@/components/ui/skeleton";
const Explore: React.FC = () => {
const { data: urdfs, isLoading: isLoadingUrdfs } = useUrdfs();
const { data: categories, isLoading: isLoadingCategories } = useCategories();
// Group content items by categories
const categorizedContent = React.useMemo(() => {
if (!urdfs) return {};
return urdfs.reduce((acc, item) => {
item.categories.forEach((category) => {
if (!acc[category]) {
acc[category] = [];
}
acc[category].push(item);
});
return acc;
}, {} as Record<string, ContentItem[]>);
}, [urdfs]);
// Get unique categories
const uniqueCategories = Object.keys(categorizedContent).sort();
return (
<div className="min-h-screen bg-netflix-background text-netflix-text">
<Header />
{/* Cosmic background wrapper */}
<div className="cosmic-background fixed inset-0 z-0">
{/* Cosmic background with stars */}
<div className="absolute inset-0 bg-[#0a0a14] overflow-hidden">
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwMCIgaGVpZ2h0PSIyMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9Im4iPjxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIuNyIgbnVtT2N0YXZlcz0iMTAiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48ZmVCbGVuZCBtb2RlPSJzY3JlZW4iLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9Ii4xIi8+PC9zdmc+')] bg-repeat opacity-30"></div>
{/* Subtle animated gradient overlay */}
<div className="absolute inset-0 bg-gradient-to-b from-indigo-900/20 via-transparent to-black/30"></div>
{/* Random stars */}
<div className="stars absolute inset-0"></div>
</div>
</div>
<div className="pt-24 relative z-10">
{/* Main content area */}
<main className="container mx-auto px-4 pb-8 max-w-full">
{/* Page title */}
<div className="mb-6 text-center">
<h1 className="text-4xl md:text-6xl font-bold tracking-tighter text-white animate-fade-in">
Explore All Robots
</h1>
<p className="mt-4 text-xl text-gray-300 max-w-3xl mx-auto">
Browse our complete collection of robotics systems and deployable
URDF units
</p>
</div>
{/* Chat window right below the title */}
<section className="mb-12 max-w-4xl mx-auto">
<div className="glass-panel">
<ChatWindow />
</div>
</section>
{/* Content sections */}
<div className="relative z-10">
{isLoadingUrdfs || isLoadingCategories ? (
// Loading skeleton
<div className="space-y-20">
{[1, 2, 3].map((i) => (
<section key={i} className="category-section min-h-[20vh]">
<Skeleton className="h-10 w-48 mb-8" />
<div className="glass-panel p-6 rounded-xl">
<div className="flex gap-4">
{[1, 2, 3, 4].map((j) => (
<Skeleton key={j} className="h-64 w-full" />
))}
</div>
</div>
</section>
))}
</div>
) : (
<div className="space-y-20">
{uniqueCategories.map((category) => (
<section
key={category}
className="category-section min-h-[20vh]"
>
<h2 className="text-3xl font-bold mb-8 text-netflix-text text-glow capitalize">
{category}
</h2>
<Carousel
title={category}
items={categorizedContent[category]}
className="glass-panel p-6 rounded-xl"
/>
</section>
))}
</div>
)}
</div>
</main>
</div>
</div>
);
};
export default Explore;
|