Function PageDots

src/Components/Home/home.jsx:241–308

({pageIndex, setPageIndex})

}

function PageDots({pageIndex, setPageIndex}) {
    const dark = useTheme().palette.mode === 'dark';
    const gradient = dark
        ? 'linear-gradient(140deg, #93C0F2, #6BA6E8)'
        : 'linear-gradient(140deg, #1C5BAA, #4F86CE)';
    const ring = dark ? 'rgba(107,166,232,0.20)' : 'rgba(28,91,170,0.16)';
    const glow = dark ? 'rgba(107,166,232,0.55)' : 'rgba(28,91,170,0.45)';
    const railGradient = dark
        ? 'linear-gradient(180deg, transparent, rgba(147,192,242,0.28), transparent)'
        : 'linear-gradient(180deg, transparent, rgba(28,91,170,0.20), transparent)';
    const idle = dark ? 'rgba(231,235,241,0.35)' : 'rgba(16,24,40,0.22)';
    const idleHover = dark ? 'rgba(231,235,241,0.6)' : 'rgba(16,24,40,0.4)';

    return (
        <Box sx={{
            position: 'fixed',
            right: {xs: 14, md: 26},
            top: '50%',
            transform: 'translateY(-50%)',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 1.75,
            zIndex: 10,
            '&::before': {
                content: '""',
                position: 'absolute',
                top: 2,
                bottom: 2,
                left: '50%',
                width: 2,
                transform: 'translateX(-50%)',
                borderRadius: 2,
                background: railGradient,
                zIndex: -1,
            },
        }}>
            {Array.from({length: PAGE_COUNT}).map((_, p) => {
                const active = pageIndex === p;
                return (
                    <Box
                        key={p}
                        component="button"
                        type="button"
                        aria-label={`第 ${p + 1} 屏`}
                        aria-current={active ? 'true' : undefined}
                        onClick={() => setPageIndex(p)}
                        sx={{
                            p: 0,
                            border: 'none',
                            appearance: 'none',
                            width: 10,
                            height: 10,
                            borderRadius: '50%',
                            cursor: 'pointer',
                            background: active ? gradient : idle,
                            '&:focus-visible': {outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 3},
                            transform: active ? 'scale(1.6)' : 'scale(1)',