You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
import styles from './contributeCard.module.scss';
|
|
import { Card } from '@/components/card';
|
|
import useLocale from '@/utils/useLocale';
|
|
import { LocalesMap } from '@/utils/useLocale';
|
|
import Link from 'next/link';
|
|
import { animated, useSpring } from '@react-spring/web';
|
|
import { useRef } from 'react';
|
|
import { CursorEffect } from '@/components/cursor';
|
|
|
|
const locales: LocalesMap = {
|
|
ru: {
|
|
title: 'Вклад',
|
|
description: 'Узнайте, как вы можете помочь проекту',
|
|
},
|
|
en: {
|
|
title: 'Contribute',
|
|
description: 'Find out how you can help the project',
|
|
},
|
|
};
|
|
|
|
export function ContributeCard() {
|
|
const t = useLocale(locales);
|
|
const cardRef = useRef(null);
|
|
|
|
const [springsBackground, apiBackground] = useSpring(() => ({
|
|
scale: 1,
|
|
config: { mass: 4, tension: 350, friction: 30 },
|
|
}));
|
|
const [springsForeground, apiForeground] = useSpring(() => ({
|
|
scale: 1,
|
|
config: { mass: 2, tension: 350, friction: 20 },
|
|
}));
|
|
|
|
const handleEnter = () => {
|
|
apiForeground.start({
|
|
scale: 1.5,
|
|
});
|
|
apiBackground.start({
|
|
scale: 1.15,
|
|
});
|
|
};
|
|
const handleLeave = () => {
|
|
apiForeground.start({
|
|
scale: 1,
|
|
});
|
|
apiBackground.start({
|
|
scale: 1,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<CursorEffect className={styles.cardWrapper} cursorBorderRadius={36} cursorPadding={12}>
|
|
<Link href="/contribute">
|
|
<Card
|
|
ref={cardRef}
|
|
className={styles.card}
|
|
title={t('title')}
|
|
subtitle={t('description')}
|
|
classes={{ content: styles.cardContent, title: styles.title }}
|
|
onMouseEnter={handleEnter}
|
|
onMouseLeave={handleLeave}
|
|
>
|
|
<div className={styles.circlesContainer}>
|
|
<animated.div
|
|
className={styles.circlesBackground}
|
|
style={{ ...springsBackground }}
|
|
/>
|
|
<animated.div
|
|
className={styles.circlesFroreground}
|
|
style={{ ...springsForeground }}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
</Link>
|
|
</CursorEffect>
|
|
);
|
|
} |