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,
Grid,
CardActions,
IconButton,
Container,
} from '@mui/material';
import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -50,74 +50,92 @@ const EventList: React.FC = () => {
return (
<Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 4 }}>
<Typography variant="h4" component="h1">
Events
<Container maxWidth="md" sx={{ textAlign: 'center', mb: 8 }}>
<Typography variant="h2" component="h1" sx={{ mb: 4 }}>
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>
<Button
variant="contained"
color="primary"
onClick={() => navigate('/create')}
size="large"
sx={{
py: 2,
px: 6,
fontSize: '1.2rem'
}}
>
Create Event
</Button>
</Box>
</Container>
<Grid container spacing={3}>
{events.map((event) => (
<Grid item xs={12} key={event.id}>
<Card
onClick={() => handleEventClick(event)}
sx={{
cursor: 'pointer',
'&:hover': {
boxShadow: 6,
}
}}
>
<CardContent>
<Typography variant="h5" component="h2">
{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}`);
{events.length > 0 && (
<Box sx={{ mt: 6 }}>
<Typography variant="h4" component="h2" sx={{ mb: 4 }}>
Current Events
</Typography>
<Grid container spacing={3}>
{events.map((event) => (
<Grid item xs={12} key={event.id}>
<Card
onClick={() => handleEventClick(event)}
sx={{
cursor: 'pointer',
'&:hover': {
boxShadow: 6,
}
}}
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>
<CardContent>
<Typography variant="h5" component="h2">
{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
</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>
)}
</Box>
);
};