We'll probably need a concept of organizations at some point in the future, but in practice the way we're using these in the codebase right now is as a project, so this renames it to that to avoid confusion.
29 lines
903 B
TypeScript
29 lines
903 B
TypeScript
import { HStack, Flex, Text } from "@chakra-ui/react";
|
|
import { useSelectedProject } from "~/utils/hooks";
|
|
|
|
// Have to export only contents here instead of full BreadcrumbItem because Chakra doesn't
|
|
// recognize a BreadcrumbItem exported with this component as a valid child of Breadcrumb.
|
|
export default function ProjectBreadcrumbContents({ projectName = "" }: { projectName?: string }) {
|
|
const { data: selectedProject } = useSelectedProject();
|
|
|
|
projectName = projectName || selectedProject?.name || "";
|
|
|
|
return (
|
|
<HStack w="full">
|
|
<Flex
|
|
p={1}
|
|
borderRadius={4}
|
|
backgroundColor="orange.100"
|
|
boxSize={6}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Text>{projectName[0]?.toUpperCase()}</Text>
|
|
</Flex>
|
|
<Text display={{ base: "none", md: "block" }} py={1}>
|
|
{projectName}
|
|
</Text>
|
|
</HStack>
|
|
);
|
|
}
|