539aabbe9c
* Fix mobile experiment buttons * Fix mobile NewExperimentButton * Add base columns for experiments * Shrink side navbar on mobile * Compress social links
32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
import { Icon, Button, Spinner, Text, type ButtonProps } from "@chakra-ui/react";
|
|
import { api } from "~/utils/api";
|
|
import { useRouter } from "next/router";
|
|
import { BsPlusSquare } from "react-icons/bs";
|
|
import { useHandledAsyncCallback } from "~/utils/hooks";
|
|
|
|
export const NewExperimentButton = (props: ButtonProps) => {
|
|
const router = useRouter();
|
|
const utils = api.useContext();
|
|
const createMutation = api.experiments.create.useMutation();
|
|
const [createExperiment, isLoading] = useHandledAsyncCallback(async () => {
|
|
const newExperiment = await createMutation.mutateAsync({ label: "New Experiment" });
|
|
await utils.experiments.list.invalidate();
|
|
await router.push({ pathname: "/experiments/[id]", query: { id: newExperiment.id } });
|
|
}, [createMutation, router]);
|
|
|
|
return (
|
|
<Button
|
|
onClick={createExperiment}
|
|
display="flex"
|
|
alignItems="center"
|
|
variant={{ base: "solid", md: "ghost" }}
|
|
{...props}
|
|
>
|
|
<Icon as={isLoading ? Spinner : BsPlusSquare} boxSize={4} />
|
|
<Text display={{ base: "none", md: "block" }} ml={2}>
|
|
New Experiment
|
|
</Text>
|
|
</Button>
|
|
);
|
|
};
|