81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
import useLocale, { LocalesMap } from '@/utils/useLocale';
|
|
import { clsx } from 'clsx';
|
|
import Link from 'next/link';
|
|
import styles from './footer.module.scss';
|
|
import FatLittleStar from '@/assets/images/fat-little-star.svg';
|
|
import { useRef } from 'react';
|
|
import useScroll from '@/utils/useScroll';
|
|
import { useRouter } from 'next/router';
|
|
import { Locales } from '@/utils/useLocale';
|
|
import { legalCopy, legalDocumentIds } from '@/modules/legal/content';
|
|
import { CursorEffect } from '@/components/cursor';
|
|
|
|
type CardProps = React.DetailedHTMLProps<
|
|
React.HTMLAttributes<HTMLDivElement>,
|
|
HTMLDivElement
|
|
>;
|
|
|
|
const localesMap: LocalesMap = {
|
|
ru: {
|
|
madeBy: 'сделано',
|
|
},
|
|
en: {
|
|
madeBy: 'made by',
|
|
},
|
|
};
|
|
|
|
export function Footer(props: CardProps) {
|
|
const { className: restClassName, ...restProps } = props;
|
|
const t = useLocale(localesMap);
|
|
const { locale, pathname } = useRouter();
|
|
const copy = legalCopy[(locale || 'en') as Locales];
|
|
const fatLittleStarRef = useRef<HTMLDivElement>(null);
|
|
|
|
useScroll((scrollY) => {
|
|
if (
|
|
typeof window === 'undefined' ||
|
|
window.document.scrollingElement === null
|
|
)
|
|
return;
|
|
|
|
const scrollOffset =
|
|
window.document.scrollingElement.scrollHeight -
|
|
window.innerHeight -
|
|
scrollY;
|
|
|
|
if (fatLittleStarRef.current) {
|
|
fatLittleStarRef.current.style.transform = `translate3D(30px, ${scrollOffset / -2 + 10}px, 0) rotate(${scrollOffset / 10}deg)`;
|
|
}
|
|
});
|
|
|
|
return (
|
|
<footer className={clsx(restClassName, styles.footer)} {...restProps}>
|
|
<div ref={fatLittleStarRef} className={styles.fatLittleStar}>
|
|
<FatLittleStar />
|
|
</div>
|
|
{/* <nav className={styles.legalLinks} aria-label={copy.label}>
|
|
{legalDocumentIds.map((id) => (
|
|
<Link
|
|
key={id}
|
|
href={`/${id}`}
|
|
aria-current={pathname === `/${id}` ? 'page' : undefined}
|
|
>
|
|
{copy.documents[id].title}
|
|
</Link>
|
|
))}
|
|
</nav> */}
|
|
<p className={styles.author}>
|
|
{`${t('madeBy')} `}
|
|
<Link
|
|
className={styles.xtimms}
|
|
href="https://xtimms.t.me"
|
|
target="_blank"
|
|
prefetch={false}
|
|
>
|
|
@xtimms
|
|
</Link>
|
|
</p>
|
|
</footer>
|
|
);
|
|
}
|