96 lines
2.7 KiB
TypeScript
96 lines
2.7 KiB
TypeScript
/**
|
||
* Flip-карточка с эффектом переворота (iOS 26).
|
||
*/
|
||
|
||
'use client';
|
||
|
||
import React, { useMemo, useState } from 'react';
|
||
|
||
export interface FlipCardProps {
|
||
/** Контент лицевой стороны */
|
||
front: React.ReactNode;
|
||
/** Контент обратной стороны */
|
||
back: React.ReactNode;
|
||
/** Высота карточки */
|
||
height?: string | number;
|
||
/** Дополнительный класс */
|
||
className?: string;
|
||
/** Управляемый режим переворота (если задан) */
|
||
flipped?: boolean;
|
||
/** Коллбек при смене состояния (для управляемого режима) */
|
||
onFlippedChange?: (flipped: boolean) => void;
|
||
}
|
||
|
||
export const FlipCard: React.FC<FlipCardProps> = ({
|
||
front,
|
||
back,
|
||
height = 'auto',
|
||
className = '',
|
||
flipped,
|
||
onFlippedChange,
|
||
}) => {
|
||
const [internalFlipped, setInternalFlipped] = useState(false);
|
||
const isControlled = useMemo(() => flipped !== undefined, [flipped]);
|
||
const isFlipped = isControlled ? (flipped as boolean) : internalFlipped;
|
||
|
||
const setFlipped = (next: boolean) => {
|
||
if (!isControlled) setInternalFlipped(next);
|
||
onFlippedChange?.(next);
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className={`flip-card ${className}`.trim()}
|
||
style={{
|
||
position: 'relative',
|
||
perspective: '1000px',
|
||
height: typeof height === 'number' ? `${height}px` : height,
|
||
width: '100%',
|
||
...(height === 'auto' && { minHeight: 340 }),
|
||
}}
|
||
>
|
||
<div
|
||
className="flip-card-inner"
|
||
style={{
|
||
position: 'relative',
|
||
width: '100%',
|
||
height: '100%',
|
||
transition: 'transform 0.6s',
|
||
transformStyle: 'preserve-3d',
|
||
transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
|
||
}}
|
||
>
|
||
<div
|
||
className="flip-card-front"
|
||
style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
width: '100%',
|
||
height: '100%',
|
||
backfaceVisibility: 'hidden',
|
||
WebkitBackfaceVisibility: 'hidden',
|
||
}}
|
||
>
|
||
{front}
|
||
</div>
|
||
<div
|
||
className="flip-card-back"
|
||
style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
width: '100%',
|
||
height: '100%',
|
||
backfaceVisibility: 'hidden',
|
||
WebkitBackfaceVisibility: 'hidden',
|
||
transform: 'rotateY(180deg)',
|
||
}}
|
||
>
|
||
{back}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|