125 lines
3.8 KiB
TypeScript
125 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 }; |