130 lines
3.8 KiB
TypeScript
130 lines
3.8 KiB
TypeScript
import React from "react";
|
|
import { Box, Typography, Paper, SxProps } from "@mui/material";
|
|
import { styled } from "@mui/material/styles";
|
|
|
|
interface QuoteContainerProps {
|
|
size?: "normal" | "small";
|
|
}
|
|
|
|
const QuoteContainer = styled(Paper, {
|
|
shouldForwardProp: (prop) => prop !== "size",
|
|
})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
|
|
position: "relative",
|
|
padding: size === "small" ? theme.spacing(1) : theme.spacing(4),
|
|
margin: size === "small" ? theme.spacing(0.5) : theme.spacing(2),
|
|
background: "linear-gradient(135deg, #FFFFFF 0%, #D3CDBF 100%)",
|
|
borderRadius: size === "small" ? theme.spacing(1) : theme.spacing(2),
|
|
boxShadow: "0 8px 32px rgba(26, 37, 54, 0.15)",
|
|
overflow: "hidden",
|
|
border: "1px solid rgba(74, 122, 125, 0.2)",
|
|
"&::before": {
|
|
content: '""',
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: size === "small" ? "2px" : "4px",
|
|
background: "linear-gradient(90deg, #4A7A7D 0%, #D4A017 100%)",
|
|
},
|
|
}));
|
|
|
|
const QuoteText = styled(Typography, {
|
|
shouldForwardProp: (prop) => prop !== "size",
|
|
})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
|
|
fontSize: size === "small" ? "0.9rem" : "1.2rem",
|
|
lineHeight: size === "small" ? 1.4 : 1.6,
|
|
fontStyle: "italic",
|
|
color: "#2E2E2E", // Charcoal Black
|
|
position: "relative",
|
|
zIndex: 2,
|
|
textAlign: "center",
|
|
fontFamily: '"Georgia", "Times New Roman", serif',
|
|
fontWeight: 400,
|
|
}));
|
|
|
|
const QuoteMark = styled(Typography, {
|
|
shouldForwardProp: (prop) => prop !== "size",
|
|
})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
|
|
fontSize: size === "small" ? "2.5rem" : "4rem",
|
|
fontFamily: '"Georgia", "Times New Roman", serif',
|
|
fontWeight: "bold",
|
|
opacity: 0.15,
|
|
position: "absolute",
|
|
zIndex: 1,
|
|
color: "#4A7A7D", // Dusty Teal
|
|
userSelect: "none",
|
|
}));
|
|
|
|
const OpeningQuote = styled(QuoteMark)(
|
|
({ size = "normal" }: QuoteContainerProps) => ({
|
|
top: size === "small" ? "5px" : "10px",
|
|
left: size === "small" ? "8px" : "15px",
|
|
})
|
|
);
|
|
|
|
const ClosingQuote = styled(QuoteMark)(
|
|
({ size = "normal" }: QuoteContainerProps) => ({
|
|
bottom: size === "small" ? "5px" : "10px",
|
|
right: size === "small" ? "8px" : "15px",
|
|
transform: "rotate(180deg)",
|
|
})
|
|
);
|
|
|
|
const AuthorText = styled(Typography, {
|
|
shouldForwardProp: (prop) => prop !== "size",
|
|
})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
|
|
marginTop: size === "small" ? theme.spacing(1) : theme.spacing(2),
|
|
textAlign: "right",
|
|
fontStyle: "normal",
|
|
fontWeight: 500,
|
|
color: "#1A2536", // Midnight Blue
|
|
fontSize: size === "small" ? "0.8rem" : "0.95rem",
|
|
"&::before": {
|
|
content: '"— "',
|
|
color: "#D4A017", // Golden Ochre dash
|
|
},
|
|
}));
|
|
|
|
const AccentLine = styled(Box, {
|
|
shouldForwardProp: (prop) => prop !== "size",
|
|
})<QuoteContainerProps>(({ theme, size = "normal" }) => ({
|
|
width: size === "small" ? "40px" : "60px",
|
|
height: size === "small" ? "1px" : "2px",
|
|
background: "linear-gradient(90deg, #D4A017 0%, #4A7A7D 100%)", // Golden Ochre to Dusty Teal
|
|
margin: size === "small" ? "0.5rem auto" : "1rem auto",
|
|
borderRadius: "1px",
|
|
}));
|
|
|
|
interface QuoteProps {
|
|
quote?: string;
|
|
author?: string;
|
|
size?: "small" | "normal";
|
|
sx?: SxProps;
|
|
}
|
|
|
|
const Quote = (props: QuoteProps) => {
|
|
const { quote, author, size = "normal", sx } = props;
|
|
return (
|
|
<QuoteContainer size={size} elevation={0} sx={sx}>
|
|
<OpeningQuote size={size}>"</OpeningQuote>
|
|
<ClosingQuote size={size}>"</ClosingQuote>
|
|
|
|
<Box sx={{ position: "relative", zIndex: 2 }}>
|
|
<QuoteText size={size} variant="body1">
|
|
{quote}
|
|
</QuoteText>
|
|
|
|
<AccentLine size={size} />
|
|
|
|
{author && (
|
|
<AuthorText size={size} variant="body2">
|
|
{author}
|
|
</AuthorText>
|
|
)}
|
|
</Box>
|
|
</QuoteContainer>
|
|
);
|
|
};
|
|
|
|
export { Quote };
|