Thomas Camlong
c53852fdb6
Rebuild the integration marquee on Mantine's Marquee, SimpleGrid and ThemeIcon instead of the hand-rolled grid, track and keyframes, and reduce the stylesheet to the mask and reduced-motion rule. Drop the useMounted guards from the login form and let the buttons rely on the pending state alone, and use Group for the restore flow's file summary.
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { Image, Marquee, SimpleGrid, ThemeIcon } from "@mantine/core";
|
|
|
|
import { splitToNChunks } from "@homarr/common";
|
|
import { integrationDefs } from "@homarr/definitions";
|
|
|
|
import classes from "./integration-marquee.module.css";
|
|
|
|
const iconGroups = splitToNChunks(
|
|
Object.values(integrationDefs)
|
|
.filter((integration) => integration.name !== "Mock")
|
|
.map((integration) => integration.iconUrl),
|
|
3,
|
|
);
|
|
const animationDuration = iconGroups.flat().length * 2;
|
|
|
|
export const IntegrationMarquee = ({ className }: { className?: string }) => (
|
|
<SimpleGrid
|
|
className={className}
|
|
cols={3}
|
|
spacing="xl"
|
|
h="calc(100% + 6rem)"
|
|
my="-3rem"
|
|
style={{ transform: "rotate(10deg)" }}
|
|
aria-hidden
|
|
>
|
|
{iconGroups.map((icons, columnIndex) => (
|
|
<Marquee
|
|
key={columnIndex}
|
|
orientation="vertical"
|
|
repeat={2}
|
|
duration={(animationDuration - columnIndex * 3) * 1000}
|
|
gap="xl"
|
|
fadeEdges={false}
|
|
h="100%"
|
|
className={classes.marquee}
|
|
classNames={{ content: classes.content }}
|
|
>
|
|
{icons.map((icon) => (
|
|
<Image key={`${icon}-${columnIndex}`} src={icon} alt="" fit="contain" w={52} h={52} />
|
|
))}
|
|
</Marquee>
|
|
))}
|
|
</SimpleGrid>
|
|
);
|