Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | import { Box, Stack, Typography } from "@mui/material";
import { ReactNode, useCallback, useState } from "react";
import { useTranslation } from "../i18n";
export interface FlipCardProps {
icon: ReactNode;
title: ReactNode;
children: ReactNode;
height?: { xs?: number | string; md?: number | string };
}
/*
* Flip card: hover (desktop) and click/tap (mobile) to reveal back content.
* Accessible: focusable + keyboard toggle.
*/
export default function FlipCard({
icon,
title,
children,
height = { xs: 300, md: 320 },
}: FlipCardProps) {
const { t } = useTranslation(["GLOBAL"]);
const [flipped, setFlipped] = useState(false);
const toggle = useCallback(() => setFlipped((f) => !f), []);
return (
<Box
sx={{
perspective: 1200,
width: "100%",
position: "relative",
height,
cursor: "pointer",
outline: "none",
"&:focus-visible .flip-inner": {
boxShadow: (theme) => `0 0 0 2px ${theme.palette.primary.main}`,
},
["@media (hover: hover) and (pointer: fine)"]: {
"&:hover .flip-inner": {
transform: `rotateY(${flipped ? 180 : 180}deg)`,
},
},
}}
role="button"
tabIndex={0}
aria-pressed={flipped}
aria-label={typeof title === "string" ? title : undefined}
onClick={toggle}
onKeyDown={(e) => {
Iif (e.key === "Enter" || e.key === " ") {
e.preventDefault();
toggle();
}
}}
>
<Box
className="flip-inner"
sx={{
position: "absolute",
inset: 0,
transformStyle: "preserve-3d",
transition: "transform 0.7s cubic-bezier(.65,.05,.36,1)",
transform: `rotateY(${flipped ? 180 : 0}deg)`,
}}
>
{/* Front */}
<Box
sx={{
position: "absolute",
inset: 0,
backfaceVisibility: "hidden",
border: (theme) => `1px solid ${theme.palette.grey[200]}`,
borderRadius: 3,
display: "flex",
alignItems: "center",
justifyContent: "center",
px: 3,
py: 4,
bgcolor: (theme) => theme.palette.background.paper,
textAlign: "center",
}}
>
<Stack spacing={2} alignItems="center" justifyContent="center">
<Box sx={{ color: (theme) => theme.palette.primary.main }}>
{icon}
</Box>
<Typography
variant="h3"
component="h3"
sx={{
fontSize: { xs: "1.35rem", md: "1.6rem" },
fontWeight: 600,
}}
>
{title}
</Typography>
<Typography variant="caption" sx={{ opacity: 0.55 }}>
{t("global:tap_press_to_flip")}
</Typography>
</Stack>
</Box>
{/* Back */}
<Box
sx={{
position: "absolute",
inset: 0,
backfaceVisibility: "hidden",
transform: "rotateY(180deg)",
border: (theme) => `1px solid ${theme.palette.grey[200]}`,
borderRadius: 3,
p: 3,
overflowY: "auto",
display: "flex",
flexDirection: "column",
bgcolor: (theme) => theme.palette.background.paper,
}}
>
{children}
</Box>
</Box>
</Box>
);
}
|