45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { SimpleGrid, Icon, Breadcrumb, BreadcrumbItem, Flex } from "@chakra-ui/react";
|
|
import { RiFlaskLine } from "react-icons/ri";
|
|
import AppShell from "~/components/nav/AppShell";
|
|
import {
|
|
ExperimentCard,
|
|
ExperimentCardSkeleton,
|
|
NewExperimentCard,
|
|
} from "~/components/experiments/ExperimentCard";
|
|
import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
|
|
import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
|
|
import { useExperiments } from "~/utils/hooks";
|
|
|
|
export default function ExperimentsPage() {
|
|
const experiments = useExperiments();
|
|
|
|
return (
|
|
<AppShell title="Experiments" requireAuth>
|
|
<PageHeaderContainer>
|
|
<Breadcrumb>
|
|
<BreadcrumbItem>
|
|
<ProjectBreadcrumbContents />
|
|
</BreadcrumbItem>
|
|
<BreadcrumbItem minH={8}>
|
|
<Flex alignItems="center">
|
|
<Icon as={RiFlaskLine} boxSize={4} mr={2} /> Experiments
|
|
</Flex>
|
|
</BreadcrumbItem>
|
|
</Breadcrumb>
|
|
</PageHeaderContainer>
|
|
<SimpleGrid w="full" columns={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing={8} py="4" px={8}>
|
|
<NewExperimentCard />
|
|
{experiments.data && !experiments.isLoading ? (
|
|
experiments?.data?.map((exp) => <ExperimentCard key={exp.id} exp={exp} />)
|
|
) : (
|
|
<>
|
|
<ExperimentCardSkeleton />
|
|
<ExperimentCardSkeleton />
|
|
<ExperimentCardSkeleton />
|
|
</>
|
|
)}
|
|
</SimpleGrid>
|
|
</AppShell>
|
|
);
|
|
}
|