Spaces:
Sleeping
Sleeping
File size: 2,267 Bytes
f70bb71 e303d00 f70bb71 e303d00 f70bb71 05ac421 ccb908b 05ac421 ccb908b 05ac421 f70bb71 |
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 |
"use client";
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { fetchFilteredSpaces } from "@/utils/network";
import { Space as SpaceProps } from "@/utils/types";
import { Space } from "@/components/space";
import { ButtonShuffler } from "./button";
import { Card } from "@/components/animate/card";
export const SpaceBrowser = ({
initialHardwareType = 'gpu',
initialSearchQuery = '',
}: {
initialHardwareType?: 'gpu' | 'cpu';
initialSearchQuery?: string;
}) => {
const [hardwareType, setHardwareType] = useState<'gpu' | 'cpu'>(initialHardwareType);
const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
const [spaces, setSpaces] = useState<SpaceProps[]>([]);
const [index, setIndex] = useState(0);
useEffect(() => {
fetchFilteredSpaces(hardwareType, searchQuery).then(setSpaces);
}, [hardwareType, searchQuery]);
return (
<motion.div className="grid grid-cols-1 gap-10 relative">
<div className="flex flex-col items-center gap-4">
<div className="flex gap-2">
<input
type="text"
placeholder="Search Spaces"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="p-2 border border-gray-300 rounded"
/>
<select
value={hardwareType}
onChange={(e) => setHardwareType(e.target.value as 'gpu' | 'cpu')}
className="p-2 border border-gray-300 rounded"
>
<option value="gpu">GPU</option>
<option value="cpu">CPU</option>
</select>
</div>
<AnimatePresence initial={false}>
{spaces.map((space, i) => (
<Card key={i} front={i === index} index={i} setIndex={setIndex}>
<Space space={space} />
</Card>
))}
</AnimatePresence>
</div>
<div className="w-4 h-[1px] bg-white/50 mx-auto hidden lg:block" />
<footer className="flex items-center justify-center lg:relative w-full">
<ButtonShuffler
onClick={() => {
setIndex((prevIndex) => (prevIndex + 1) % spaces.length);
}}
/>
</footer>
</motion.div>
);
};
|