178 lines
6.4 KiB
TypeScript
178 lines
6.4 KiB
TypeScript
import { Box, Card, Chip } from '@mui/material';
|
|
import { styled } from '@mui/material/styles';
|
|
|
|
// Shared styled components for dashboard components
|
|
export const DashboardContainer = styled(Box)(({ theme }) => ({
|
|
minHeight: '100vh',
|
|
background: 'radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,0.08) 0%, transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(255,255,255,0.06) 0%, transparent 60%), linear-gradient(135deg, #0f1226 0%, #1b1e3b 35%, #2a2f59 70%, #3a3f7a 100%)',
|
|
padding: theme.spacing(5, 4, 6, 4),
|
|
position: 'relative',
|
|
color: 'rgba(255,255,255,0.9)',
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
inset: 0,
|
|
background:
|
|
'url("data:image/svg+xml,%3Csvg width=\'80\' height=\'80\' viewBox=\'0 0 80 80\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.03\'%3E%3Ccircle cx=\'40\' cy=\'40\' r=\'2\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")',
|
|
pointerEvents: 'none',
|
|
},
|
|
'&::after': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
width: '900px',
|
|
height: '900px',
|
|
background: 'radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 65%)',
|
|
transform: 'translate(-50%, -50%)',
|
|
filter: 'blur(20px)',
|
|
pointerEvents: 'none',
|
|
zIndex: 0,
|
|
},
|
|
}));
|
|
|
|
export const GlassCard = styled(Card)(({ theme }) => ({
|
|
background: 'linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%)',
|
|
backdropFilter: 'blur(22px)',
|
|
WebkitBackdropFilter: 'blur(22px)',
|
|
border: '1px solid rgba(255, 255, 255, 0.16)',
|
|
borderRadius: theme.spacing(3.5),
|
|
boxShadow:
|
|
'0 18px 50px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.1)',
|
|
transition: 'transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: '-120%',
|
|
width: '100%',
|
|
height: '100%',
|
|
background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent)',
|
|
transition: 'left 0.6s ease-in-out',
|
|
},
|
|
'&:hover': {
|
|
transform: 'translateY(-10px) scale(1.015)',
|
|
boxShadow: '0 30px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.3)',
|
|
border: '1px solid rgba(255, 255, 255, 0.22)',
|
|
'&::before': {
|
|
left: '120%',
|
|
},
|
|
},
|
|
}));
|
|
|
|
export const ShimmerHeader = styled(Box)(({ theme }) => ({
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: '-100%',
|
|
width: '100%',
|
|
height: '3px',
|
|
background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent)',
|
|
animation: 'shimmer 3s infinite',
|
|
},
|
|
'@keyframes shimmer': {
|
|
'0%': { left: '-100%' },
|
|
'100%': { left: '100%' },
|
|
},
|
|
}));
|
|
|
|
export const SearchContainer = styled(Box)(({ theme }) => ({
|
|
background: 'rgba(255, 255, 255, 0.1)',
|
|
backdropFilter: 'blur(20px)',
|
|
border: '1px solid rgba(255, 255, 255, 0.2)',
|
|
borderRadius: theme.spacing(3),
|
|
padding: theme.spacing(2),
|
|
marginBottom: theme.spacing(4),
|
|
transition: 'all 0.3s ease',
|
|
'&:hover': {
|
|
background: 'rgba(255, 255, 255, 0.15)',
|
|
border: '1px solid rgba(255, 255, 255, 0.3)',
|
|
},
|
|
}));
|
|
|
|
export const CategoryChip = styled(Chip, {
|
|
shouldForwardProp: (prop) => prop !== 'active' && prop !== 'toolCount' && prop !== 'gradient',
|
|
})<{ active?: boolean; toolCount?: number; gradient?: string }>(({ theme, active, toolCount, gradient }) => ({
|
|
background: active
|
|
? (gradient || 'linear-gradient(135deg, rgba(76, 175, 80, 0.4) 0%, rgba(139, 195, 74, 0.3) 50%, rgba(255, 255, 255, 0.2) 100%)')
|
|
: 'linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.05) 100%)',
|
|
color: 'white',
|
|
fontWeight: active ? 700 : 600,
|
|
fontSize: '0.9rem',
|
|
padding: theme.spacing(1, 2),
|
|
border: active
|
|
? '2px solid rgba(255, 255, 255, 0.6)'
|
|
: '1px solid rgba(255, 255, 255, 0.25)',
|
|
boxShadow: active
|
|
? '0 6px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2)'
|
|
: '0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1)',
|
|
transform: active ? 'translateY(-2px) scale(1.05)' : 'none',
|
|
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
position: 'relative',
|
|
'&:hover': {
|
|
background: active
|
|
? (gradient || 'linear-gradient(135deg, rgba(76, 175, 80, 0.5) 0%, rgba(139, 195, 74, 0.4) 50%, rgba(255, 255, 255, 0.25) 100%)')
|
|
: 'linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.1) 100%)',
|
|
transform: 'translateY(-2px)',
|
|
boxShadow: active
|
|
? '0 8px 25px rgba(76, 175, 80, 0.4), 0 0 0 1px rgba(76, 175, 80, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3)'
|
|
: '0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2)',
|
|
border: active
|
|
? '2px solid rgba(76, 175, 80, 0.8)'
|
|
: '1px solid rgba(255, 255, 255, 0.4)',
|
|
},
|
|
'& .MuiChip-label': {
|
|
padding: theme.spacing(0.5, 1),
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: theme.spacing(0.5),
|
|
},
|
|
// Tool count badge
|
|
...(toolCount && {
|
|
'&::after': {
|
|
content: `"${toolCount}"`,
|
|
position: 'absolute',
|
|
top: -6,
|
|
right: -6,
|
|
backgroundColor: active ? '#4caf50' : 'rgba(255, 255, 255, 0.8)',
|
|
color: active ? 'white' : 'rgba(0, 0, 0, 0.8)',
|
|
borderRadius: '10px',
|
|
padding: '2px 6px',
|
|
fontSize: '0.7rem',
|
|
fontWeight: 700,
|
|
minWidth: '18px',
|
|
textAlign: 'center',
|
|
boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
|
|
border: active ? '1px solid rgba(255,255,255,0.3)' : '1px solid rgba(0,0,0,0.1)',
|
|
},
|
|
}),
|
|
}));
|
|
|
|
export const EnhancedGlassCard = styled(GlassCard)(({ theme }) => ({
|
|
background: 'rgba(255, 255, 255, 0.12)',
|
|
border: '2px solid rgba(255, 255, 255, 0.2)',
|
|
'&:hover': {
|
|
border: '2px solid rgba(255, 255, 255, 0.3)',
|
|
},
|
|
}));
|
|
|
|
export const AIInsightsPanel = styled(GlassCard)(({ theme }) => ({
|
|
background: 'rgba(255, 255, 255, 0.1)',
|
|
border: '1px solid rgba(255, 255, 255, 0.15)',
|
|
position: 'relative',
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: '3px',
|
|
background: 'linear-gradient(90deg, #667eea, #764ba2, #f093fb)',
|
|
borderRadius: '3px 3px 0 0',
|
|
},
|
|
}));
|