From aa8854adcb9449d2a961c5e4314a223f6e7bcc04 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Tue, 13 Feb 2024 20:38:17 -0600
Subject: Initial commit

---
 src/App.tsx                 |  36 +++++++++++++++
 src/components/Bar.tsx      |  39 ++++++++++++++++
 src/components/Registry.tsx |  14 ++++++
 src/components/Rsvp.tsx     | 106 ++++++++++++++++++++++++++++++++++++++++++++
 src/components/Schedule.tsx |  38 ++++++++++++++++
 src/main.tsx                |  37 ++++++++++++++++
 src/vite-env.d.ts           |   1 +
 7 files changed, 271 insertions(+)
 create mode 100644 src/App.tsx
 create mode 100644 src/components/Bar.tsx
 create mode 100644 src/components/Registry.tsx
 create mode 100644 src/components/Rsvp.tsx
 create mode 100644 src/components/Schedule.tsx
 create mode 100644 src/main.tsx
 create mode 100644 src/vite-env.d.ts

(limited to 'src')

diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..156719f
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Outlet, Route, Routes } from 'react-router-dom';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+
+import Bar from './components/Bar';
+import Home from './components/Home';
+import Schedule from './components/Schedule';
+import Registry from './components/Registry';
+import Rsvp from './components/Rsvp';
+
+
+function App() {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+  const theme = React.useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: prefersDarkMode ? 'dark' : 'light'
+        }
+      }),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <Bar />
+      <Outlet />
+    </ThemeProvider>
+  );
+}
+
+export default App;
diff --git a/src/components/Bar.tsx b/src/components/Bar.tsx
new file mode 100644
index 0000000..ce3db43
--- /dev/null
+++ b/src/components/Bar.tsx
@@ -0,0 +1,39 @@
+import { Link } from 'react-router-dom';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+
+function Bar() {
+  const pages = [
+    { name: 'Schedule', to: '/schedule'},
+    { name: 'RSVP', to: '/rsvp' },
+    { name: 'Registry', to: '/registry' }
+  ];
+
+  return (
+    <AppBar position="relative">
+      <Toolbar>
+        <Typography
+          variant="h4"
+          component={Link}
+          to="/"
+          color="inherit"
+          sx={{ textDecoration: 'none' }}
+          >
+          Wedding
+        </Typography>
+        <Box sx={{ marginLeft: 'auto' }}>
+          {pages.map((page) => (
+            <Button component={Link} to={page.to} key={page.name} color="inherit">
+              {page.name}
+            </Button>
+          ))}
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+export default Bar;
diff --git a/src/components/Registry.tsx b/src/components/Registry.tsx
new file mode 100644
index 0000000..b07d680
--- /dev/null
+++ b/src/components/Registry.tsx
@@ -0,0 +1,14 @@
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+
+function Registry() {
+  return (
+    <Paper>
+      <Typography variant="h4" component="h4">
+        Registry
+      </Typography>
+    </Paper>
+  );
+}
+
+export default Registry;
diff --git a/src/components/Rsvp.tsx b/src/components/Rsvp.tsx
new file mode 100644
index 0000000..881bf09
--- /dev/null
+++ b/src/components/Rsvp.tsx
@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+
+function Rsvp() {
+  const [guestList, setGuestList] = useState([]);
+
+  const onAddBtnClick = event => {
+    setGuestList(guestList.concat(
+      <Grid container spacing={2}>
+        <Grid item xs={6} md={6} lg={6}>
+          <TextField key={guestList.length} label="Name" variant="outlined" />
+        </Grid>
+        <Grid item xs={6} md={6} lg={6}>
+          <FormControl>
+            <FormLabel>Meal Preference</FormLabel>
+            <RadioGroup>
+              <FormControlLabel
+                value="Beef"
+                control={<Radio />}
+                label="Beef"
+              />
+              <FormControlLabel
+                value="Chicken"
+                control={<Radio />}
+                label="Chicken"
+              />
+              <FormControlLabel
+                value="Fish"
+                control={<Radio />}
+                label="Fish"
+              />
+              <FormControlLabel
+                value="Vegetarian"
+                control={<Radio />}
+                label="Vegetarian"
+              />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
+      </Grid>
+    ));
+  }
+
+  return (
+    <Paper>
+      <Grid container spacing={2}>
+        <Grid item xs={4} md={4} lg={4}>
+          <Typography>Date: April 14, 2025</Typography>
+        </Grid>
+        <Grid item xs={4} md={4} lg={4}>
+          <Typography>Location: </Typography>
+        </Grid>
+        <Grid item xs={4} md={4} lg={4}>
+          <Typography>RSVP Deadline: </Typography>
+        </Grid>
+        <Grid item xs={4} md={4} lg={4}>
+          <TextField required label="Name" variant="outlined" />
+        </Grid>
+        <Grid item xs={4} md={4} lg={4}>
+          <FormControl>
+            <FormLabel>Are you attending?</FormLabel>
+            <RadioGroup>
+              <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+              <FormControlLabel value="No" control={<Radio />} label="No" />
+            </RadioGroup>
+          </FormControl>
+        </Grid>
+        <Grid item xs={4} md={4} lg={4}>
+          <Button
+            onClick={onAddBtnClick}
+            sx={{ maxWidth: 240 }}
+            variant="contained">
+            Add Additional Guests
+          </Button>
+        </Grid>
+        {guestList}
+        <Grid item xs={6} md={6} lg={6}>
+          <TextField
+            label="Dietary Restrictions"
+            variant="outlined"
+          />
+        </Grid>
+        <Grid item xs={6} md={6} lg={6}>
+          <TextField
+            label="Song Request"
+            variant="outlined"
+          />
+        </Grid>
+        <Grid item>
+          <Button sx={{ maxWidth: 80 }} variant="contained">Submit</Button>
+        </Grid>
+      </Grid>
+    </Paper>
+  );
+}
+
+export default Rsvp;
diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx
new file mode 100644
index 0000000..2fd0ab0
--- /dev/null
+++ b/src/components/Schedule.tsx
@@ -0,0 +1,38 @@
+import Typography from '@mui/material/Typography';
+import Timeline from '@mui/lab/Timeline';
+import TimelineItem from '@mui/lab/TimelineItem';
+import TimelineSeparator from '@mui/lab/TimelineSeparator';
+import TimelineConnector from '@mui/lab/TimelineConnector';
+import TimelineContent from '@mui/lab/TimelineContent';
+import TimelineDot from '@mui/lab/TimelineDot';
+import TimelineOppositeContent, {
+  timelineOppositeContentClasses,
+} from '@mui/lab/TimelineOppositeContent';
+
+function Schedule() {
+  return (
+    <Timeline>
+      <TimelineItem>
+        <TimelineOppositeContent>
+          4:00 pm
+        </TimelineOppositeContent>
+        <TimelineSeparator>
+          <TimelineDot />
+          <TimelineConnector />
+        </TimelineSeparator>
+        <TimelineContent>Ceremony</TimelineContent>
+      </TimelineItem>
+      <TimelineItem>
+        <TimelineOppositeContent>
+          5:00 pm
+        </TimelineOppositeContent>
+        <TimelineSeparator>
+          <TimelineDot />
+        </TimelineSeparator>
+        <TimelineContent>Reception</TimelineContent>
+      </TimelineItem>
+    </Timeline>
+  );
+}
+
+export default Schedule;
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..5364a01
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
+import App from './App';
+import Bar from './components/Bar';
+import Home from './components/Home';
+import Schedule from './components/Schedule';
+import Registry from './components/Registry';
+import Rsvp from './components/Rsvp';
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    children: [
+      {
+        path: "schedule",
+        element: <Schedule />
+      },
+      {
+        path: "registry",
+        element: <Registry />
+      },
+      {
+        path: "rsvp",
+        element: <Rsvp />
+      }
+    ]
+  }
+]);
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>
+);
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
-- 
cgit v1.2.3