RyderTech/rsvp-manager
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Enhance homepage with centered layout, larger title, and descriptive text

Browse Source
This commit is contained in:
Joshua Ryder
2025-04-30 18:06:08 -04:00
parent bada79ed62
commit bfd27412af
1 changed files with 75 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
frontend/src/components/EventList.tsx
View File

@@ -8,7 +8,7 @@ import {
Typography, Typography,
Grid, Grid,
CardActions, CardActions,
IconButton, Container,
} from '@mui/material'; } from '@mui/material';
import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings'; import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
import VisibilityIcon from '@mui/icons-material/Visibility'; import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -50,74 +50,92 @@ const EventList: React.FC = () => {
return ( return (
<Box> <Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 4 }}> <Container maxWidth="md" sx={{ textAlign: 'center', mb: 8 }}>
<Typography variant="h4" component="h1"> <Typography variant="h2" component="h1" sx={{ mb: 4 }}>
Events RSVP Manager
</Typography>
<Typography variant="h6" component="p" sx={{ mb: 6, color: 'text.secondary' }}>
Welcome to RSVP Manager! Create and manage your events with ease.
Organize gatherings, track attendance, and coordinate items that guests can bring.
Perfect for parties, meetings, and any event that needs RSVP coordination.
</Typography> </Typography>
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
onClick={() => navigate('/create')} onClick={() => navigate('/create')}
size="large"
sx={{
py: 2,
px: 6,
fontSize: '1.2rem'
}}
> >
Create Event Create Event
</Button> </Button>
</Box> </Container>
<Grid container spacing={3}> {events.length > 0 && (
{events.map((event) => ( <Box sx={{ mt: 6 }}>
<Grid item xs={12} key={event.id}> <Typography variant="h4" component="h2" sx={{ mb: 4 }}>
<Card Current Events
onClick={() => handleEventClick(event)} </Typography>
sx={{ <Grid container spacing={3}>
cursor: 'pointer', {events.map((event) => (
'&:hover': { <Grid item xs={12} key={event.id}>
boxShadow: 6, <Card
} onClick={() => handleEventClick(event)}
}} sx={{
> cursor: 'pointer',
<CardContent> '&:hover': {
<Typography variant="h5" component="h2"> boxShadow: 6,
{event.title} }
</Typography>
<Typography color="textSecondary" gutterBottom>
{new Date(event.date).toLocaleDateString()} at {event.location}
</Typography>
<Typography variant="body2" component="p">
{event.description}
</Typography>
</CardContent>
<CardActions>
<Button
onClick={(e) => {
e.stopPropagation();
navigate(`/view/events/${event.slug}`);
}} }}
color="primary"
aria-label="view rsvps"
variant="outlined"
startIcon={<VisibilityIcon />}
sx={{ ml: 1 }}
> >
View RSVPs <CardContent>
</Button> <Typography variant="h5" component="h2">
<Button {event.title}
onClick={(e) => { </Typography>
e.stopPropagation(); <Typography color="textSecondary" gutterBottom>
handleAdminClick(event); {new Date(event.date).toLocaleDateString()} at {event.location}
}} </Typography>
color="primary" <Typography variant="body2" component="p">
aria-label="manage rsvps" {event.description}
variant="outlined" </Typography>
startIcon={<AdminPanelSettingsIcon />} </CardContent>
sx={{ ml: 1 }} <CardActions>
> <Button
Manage RSVPs onClick={(e) => {
</Button> e.stopPropagation();
</CardActions> navigate(`/view/events/${event.slug}`);
</Card> }}
color="primary"
aria-label="view rsvps"
variant="outlined"
startIcon={<VisibilityIcon />}
sx={{ ml: 1 }}
>
View RSVPs
</Button>
<Button
onClick={(e) => {
e.stopPropagation();
handleAdminClick(event);
}}
color="primary"
aria-label="manage rsvps"
variant="outlined"
startIcon={<AdminPanelSettingsIcon />}
sx={{ ml: 1 }}
>
Manage RSVPs
</Button>
</CardActions>
</Card>
</Grid>
))}
</Grid> </Grid>
))} </Box>
</Grid> )}
</Box> </Box>
); );
}; };