Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): style board name

Browse Source
This commit is contained in:
psychedelicious 2024-07-09 22:47:03 +10:00
parent 781b800ef7
commit 2460689c00
1 changed files with 6 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
View File

@ -1,29 +1,17 @@
import { Flex } from '@invoke-ai/ui-library';
import { Flex, Text } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { memo, useMemo } from 'react';
import { memo } from 'react';
import { useBoardName } from 'services/api/hooks/useBoardName';
const GalleryBoardName = () => {
const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
const boardName = useBoardName(selectedBoardId);
const formattedBoardName = useMemo(() => {
if (boardName.length > 20) {
return `${boardName.substring(0, 20)}...`;
}
return boardName;
}, [boardName]);
return (
<Flex
justifyContent="center"
fontSize="md"
fontWeight="bold"
borderWidth="thin"
borderStyle="solid"
borderRadius="base"
>
{formattedBoardName}
<Flex w="full" borderWidth={1} borderRadius="base" alignItems="center" justifyContent="center" px={2}>
<Text fontWeight="semibold" fontSize="md" noOfLines={1} wordBreak="break-all" color="base.200">
{boardName}
</Text>
</Flex>
);
};