damien/personal-website
1
0
Fork 0
Code Actions Packages Releases Activity

fix

Browse Source
This commit is contained in:
Damien 2025-02-27 02:36:14 -05:00
parent 661f24f042
commit a9afbe44dd
2 changed files with 124 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
src/components/SocialIcons.tsx
View File

@ -1,7 +1,8 @@
import React from 'react';
import { Box, IconButton, Tooltip, SvgIcon } from '@mui/material';
import React, { useState } from 'react';
import { Box, IconButton, Tooltip, SvgIcon, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField } from '@mui/material';
import GitHubIcon from '@mui/icons-material/GitHub';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import PersonIcon from '@mui/icons-material/Person';
import { SvgIconProps } from '@mui/material/SvgIcon';
// Custom icons for platforms without MUI icons
@ -53,6 +54,7 @@ export interface SocialLink {
name: string;
url: string;
icon: React.ElementType;
isCustomerSupport?: boolean;
}
// Default social links
@ -92,6 +94,12 @@ const defaultSocialLinks: SocialLink[] = [
url: 'https://chat.d4m13n.dev',
icon: AIIcon,
},
{
name: 'Customer Portal',
url: 'calicoastrp.d4m13n.dev',
icon: PersonIcon,
isCustomerSupport: true, // Flag to identify customer support button
},
];
// Glow effects
@ -114,6 +122,11 @@ const SocialIcons: React.FC<SocialIconsProps> = ({
links = defaultSocialLinks,
position = 'top-right'
}) => {
// State for customer portal dialog
const [dialogOpen, setDialogOpen] = useState(false);
const [name, setName] = useState('');
const [error, setError] = useState(false);
// Determine position styling
const getPositionStyling = () => {
switch (position) {
@ -130,39 +143,115 @@ const SocialIcons: React.FC<SocialIconsProps> = ({
}
};
// Handle customer portal button click
const handleCustomerPortalClick = (e: React.MouseEvent, linkName: string) => {
if (linkName === 'Customer Portal') {
e.preventDefault();
setDialogOpen(true);
setName('');
setError(false);
}
};
// Handle name submission
const handleSubmit = () => {
if (name === 'cali-coast') {
window.location.href = 'https://0.0.0.0/';
} else {
setError(true);
}
};
return (
<Box
sx={{
position: 'fixed',
zIndex: 1000,
display: { xs: 'none', sm: 'flex' }, // Hide on mobile (xs), show on sm and up
gap: 1,
...getPositionStyling()
}}
>
{links.map((link) => (
<Tooltip key={link.name} title={link.name} arrow>
<IconButton
component="a"
href={link.url}
target="_blank"
rel="noopener noreferrer"
size="small"
sx={{
color: 'white',
...whiteGlowEffects,
transition: 'all 0.3s ease-in-out',
'&:hover': {
color: '#4fd1ff',
...blueGlowEffects
}
}}
>
<link.icon />
</IconButton>
</Tooltip>
))}
</Box>
<>
<Box
sx={{
position: 'fixed',
zIndex: 1000,
display: { xs: 'none', sm: 'flex' }, // Hide on mobile (xs), show on sm and up
gap: 1,
...getPositionStyling()
}}
>
{links.map((link) => (
link.isCustomerSupport ? (
<Box
key={link.name}
component="a"
href={link.url}
onClick={(e) => handleCustomerPortalClick(e, link.name)}
sx={{
display: 'flex',
alignItems: 'center',
padding: '4px 8px',
borderRadius: '4px',
border: '1px solid white',
color: 'white',
textDecoration: 'none',
...whiteGlowEffects,
transition: 'all 0.3s ease-in-out',
'&:hover': {
color: '#4fd1ff',
borderColor: '#4fd1ff',
...blueGlowEffects
}
}}
>
<link.icon sx={{ mr: 1 }} />
<Box component="span" sx={{ fontSize: '0.875rem', fontWeight: 'medium' }}>
Customer Portal
</Box>
</Box>
) : (
<Tooltip key={link.name} title={link.name} arrow>
<IconButton
component="a"
href={link.url}
target="_blank"
rel="noopener noreferrer"
size="small"
sx={{
color: 'white',
...whiteGlowEffects,
transition: 'all 0.3s ease-in-out',
'&:hover': {
color: '#4fd1ff',
...blueGlowEffects
}
}}
>
<link.icon />
</IconButton>
</Tooltip>
)
))}
</Box>
{/* Customer Portal Dialog */}
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
<DialogTitle>Customer Portal</DialogTitle>
<DialogContent>
<TextField
autoFocus
margin="dense"
label="Enter your customer name"
type="text"
fullWidth
variant="outlined"
value={name}
onChange={(e) => setName(e.target.value)}
error={error}
helperText={error ? "Invalid customer name" : ""}
/>
</DialogContent>
<DialogActions>
<Button onClick={() => setDialogOpen(false)}>Cancel</Button>
<Button onClick={handleSubmit} variant="contained" color="primary">
Submit
</Button>
</DialogActions>
</Dialog>
</>
);
};

30
src/components/Timeline/TimelineItem.tsx
View File

@ -139,36 +139,6 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
<Typography variant="body1" paragraph>
{item.description}
</Typography>
<MasonryGrid
items={item.items}
isVisible={isVisible}
animationDelay={index * 200 + 200} // Delay after the content fades in
/>
{item.actionUrl && (
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 2, width: '100%' }}>
<Button
variant="contained"
endIcon={<ArrowForwardIcon />}
href={item.actionUrl}
fullWidth
sx={{
backgroundColor: 'rgba(79, 209, 255, 0.8)', // Bright blue like d4m13n.dev
color: 'white', // White text
textAlign: 'center',
justifyContent: 'center',
...buttonHoverEffects,
'&:hover': {
...buttonHoverEffects['&:hover'],
backgroundColor: 'rgba(79, 209, 255, 0.9)', // Slightly brighter on hover
}
}}
>
{item.actionText || 'Go to'}
</Button>
</Box>
)}
</Paper>
</Fade>
);