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): improved model list styling

Browse Source
This commit is contained in:
psychedelicious
2024-03-07 15:14:38 +11:00
parent b0add805c5
commit 2f0a653a7f
6 changed files with 131 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx
View File

@ -1,14 +1,16 @@
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { Flex, Heading } from '@invoke-ai/ui-library';
import type { PropsWithChildren } from 'react';
import { memo } from 'react';
type StickyScrollableHeadingProps = {
title: string;
sx?: SystemStyleObject;
};
const StickyScrollableHeading = memo((props: StickyScrollableHeadingProps) => {
return (
<Flex ps={2} pb={4} position="sticky" zIndex={1} top={0} bg="base.800">
<Flex ps={2} pb={4} position="sticky" zIndex={1} top={0} bg="base.800" sx={props.sx}>
<Heading size="sm">{props.title}</Heading>
</Flex>
);
@ -16,11 +18,11 @@ const StickyScrollableHeading = memo((props: StickyScrollableHeadingProps) => {
StickyScrollableHeading.displayName = 'StickyScrollableHeading';
type StickyScrollableContentProps = PropsWithChildren;
type StickyScrollableContentProps = PropsWithChildren<{ sx?: SystemStyleObject }>;
const StickyScrollableContent = memo((props: StickyScrollableContentProps) => {
return (
<Flex p={4} borderRadius="base" bg="base.750" flexDir="column" gap={4}>
<Flex p={4} borderRadius="base" bg="base.750" flexDir="column" gap={4} sx={props.sx}>
{props.children}
</Flex>
);
@ -30,13 +32,15 @@ StickyScrollableContent.displayName = 'StickyScrollableContent';
type StickyScrollableProps = PropsWithChildren<{
title: string;
headingSx?: SystemStyleObject;
contentSx?: SystemStyleObject;
}>;
export const StickyScrollable = memo((props: StickyScrollableProps) => {
return (
<Flex key={props.title} flexDir="column">
<StickyScrollableHeading title={props.title} />
<StickyScrollableContent>{props.children}</StickyScrollableContent>
<StickyScrollableHeading title={props.title} sx={props.headingSx} />
<StickyScrollableContent sx={props.contentSx}>{props.children}</StickyScrollableContent>
</Flex>
);
});