mrheffern
/
spokane-bitcoin-club
mirror of https://github.com/mrheffern/spokane-bitcoin-club
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5 from mrheffern/calendar-modal 

Calendar modal
developement
mrheffern 2023-09-24 19:42:06 -07:00 committed by GitHub
parent 733fba0ddd 8f674ddcb8
commit 05581ae7ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 153 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/BottomBar.jsx
View File

@ -1,17 +1,25 @@
import React from 'react'
import styled from '@emotion/styled'
import { Grid, Typography } from '@mui/material';
const CustomDiv = styled.div`
background-color: ${(props) => props.theme.palette.primary.brightest};
height: 10vh;
background-color: black;
color: white;
height: 50px;
width: 100%
`;
const BottomBar = () => {
return (
<CustomDiv>
contact: 530-368-6616
email: mrheffern@gmail.com
<Grid container alignItems='center' style={{height: "100%"}}>
<Grid item>
<Typography style={{marginLeft: "10px"}}>
Phone: 530-368-6616
Email: mrheffern@gmail.com
</Typography>
</Grid>
</Grid>
</CustomDiv>
)
}

63
app/CalendarPage.jsx
View File

@ -1,8 +1,9 @@
import React from 'react'
import React, {useState} from 'react'
import styled from '@emotion/styled'
import { Box, Container, Grid, Paper, Typography } from '@mui/material';
import { Box, Container, Grid, Paper, Typography, Badge } from '@mui/material';
import { grey } from '@mui/material/colors';
import { DateCalendar } from '@mui/x-date-pickers';
import { DateCalendar, PickersDay } from '@mui/x-date-pickers';
import MeetupDetails from '@components/MeetupDetails';
const SuiteAndBTCGraphic = (
<svg width="485" height="372" viewBox="0 0 485 372" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -75,11 +76,60 @@ const CustomDiv = styled.div`
`;
const isFirstWednesday = (day) => {
// console.log(day);
// console.log(day instanceof Date);
// console.log(JSON.stringify(day));
let date = new Date(day);
return date.getDay() === 3 && date.getDate() <= 7;
}
const MeetupDay = (props) => {
const {day, outsideCurrentMonth, ...other } = props;
const isSelected = !props.outsideCurrentMonth && isFirstWednesday(day);
return (
<Badge
key={props.day.toString()}
variant='dot'
color='secondary'
invisible={!isSelected}
overlap='circular'
>
<PickersDay {...other} outsideCurrentMonth={outsideCurrentMonth} day={day} />
</Badge>
);
}
/*
The goal of the calendar is to be able to click on dates and have a popup that shows our meetup details.
3. Also need to change colors
*/
const CalendarPage = () => {
const [openMeetupDetails, setOpenMeetupDetails] = useState(false);
const [selectedMeetupDate, setSelectedMeetupDate] = useState();
const closeMeetupDetails = () => {
setOpenMeetupDetails(false);
}
const checkToOpenDetails = (value, selectionState) => {
if (isFirstWednesday(value)) {
setSelectedMeetupDate(value);
setOpenMeetupDetails(true);
}
}
return (
<CustomDiv>
<Container>
<MeetupDetails open={openMeetupDetails} onClose={closeMeetupDetails} date={selectedMeetupDate} />
<Grid container spacing={3}>
<Grid item xs={6}>
<Box sx={{display: "flex", justifyContent: "center"}}>
@ -87,7 +137,12 @@ const CalendarPage = () => {
</Box>
<Box>
<Paper>
<DateCalendar />
<DateCalendar
slots={{
day: MeetupDay
}}
onChange={checkToOpenDetails}
/>
</Paper>
</Box>
<Box>

45
app/MainPage.jsx
View File

@ -1,25 +1,16 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Grid } from '@mui/material';
import { Container, Grid, Typography } from '@mui/material';
import React from 'react'
const CustomDiv = styled.div`
background-color: ${(props) => props.theme.palette.primary.main};
height: 140vh;
width: 100%
height: 700px;
width: 100%;
display: flex;
`;
const CustomH1 = styled.h1`
color: #2F2E41;
`;
const CustomH3 = styled.h3`
color: #000;
`;
const StyledGrid = styled(Grid)`
height: 100vh;
`;
const CircleContainer = styled.div`
width: 325px;
@ -30,6 +21,8 @@ const CircleContainer = styled.div`
justify-content: center;
align-items: center;
font-size: 24px; /* Replace with your desired font size */
border-style: solid;
border-color: purple;
`;
const HorizontalLine = styled.div`
@ -40,21 +33,31 @@ const HorizontalLine = styled.div`
function MainPage() {
return (
<CustomDiv style={{display: 'flex'}}>
<Grid container justifyContent="center" alignItems="center" spacing={5}>
<Grid item xs={4}>
<CustomH1>Empowerment for those who need it most</CustomH1>
<HorizontalLine />
<CustomH3>Bitcoin is a grassroots technology for communities to build lasting wealth</CustomH3>
<CustomDiv>
<Container>
<Grid container marginTop={20} justifyContent='center' spacing={2}>
<Grid item sm={4} xs={12}>
<Grid container direction="column">
<Grid item>
<Typography align='center' variant='h2'>Empowerment for those who need it most</Typography>
</Grid>
<Grid item xs={4}>
<Grid item>
<HorizontalLine />
</Grid>
<Grid item>
<Typography align='center' variant='h5'>Bitcoin is a grassroots technology for communities to build lasting wealth</Typography>
</Grid>
</Grid>
</Grid>
<Grid item sm={4} xs={12}>
<CircleContainer>
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="147" viewBox="0 0 192 295" fill="none">
<path d="M15.25 59.25H132.917C144.619 59.25 155.843 63.8989 164.118 72.1739C172.393 80.449 177.042 91.6723 177.042 103.375C177.042 115.078 172.393 126.301 164.118 134.576C155.843 142.851 144.619 147.5 132.917 147.5M132.917 147.5C144.619 147.5 155.843 152.149 164.118 160.424C172.393 168.699 177.042 179.922 177.042 191.625C177.042 203.328 172.393 214.551 164.118 222.826C155.843 231.101 144.619 235.75 132.917 235.75H15.25M132.917 147.5H44.6667M44.6667 59.25V235.75M59.375 15.125V59.25M118.208 15.125V59.25M59.375 235.75V279.875M118.208 235.75V279.875" stroke="#FAE84E" stroke-width="29.4167" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</CircleContainer>
</Grid>/
</Grid>
</Grid>
</Container>
</CustomDiv>
);
}

27
app/WheelSpinPage.jsx
View File

@ -8,7 +8,7 @@ import WinningDialog from '@components/WinningDialog';
const CustomDiv = styled.div`
background-color: ${(props) => props.theme.palette.primary.main};
height: 140vh;
height: 900px;
width: 100%;
display: flex;
justify-content: center;
@ -20,10 +20,16 @@ const WheelSpinPage = () => {
const [openSpinResult, setOpenSpinResult] = useState(false);
const [winningIndex, setWinningIndex] = useState(0);
const [emailValue, setEmailValue] = useState("");
const wheelRef = useRef();
const handleTextChange = (event) => {
setEmailValue(event.target.value);
}
const submitHandler = () => {
setEmailValue("");
wheelRef.current.spin(1000);
}
@ -43,12 +49,12 @@ const WheelSpinPage = () => {
{ label: '4 KSats', backgroundColor: theme.palette.secondary.main },
{ label: '4 KSats', backgroundColor: '#f7931a' },
{ label: '4 KSats', backgroundColor: theme.palette.secondary.main },
{ label: '17 KSats', backgroundColor: '#f7931a'},
{ label: '19 KSats', backgroundColor: '#f7931a'},
{ label: '4 KSats', backgroundColor: theme.palette.secondary.main},
{ label: '4 KSats', backgroundColor: '#f7931a'},
{ label: '4 KSats', backgroundColor: theme.palette.secondary.main},
{ label: '4 KSats', backgroundColor: '#f7931a'},
{ label: '17 KSats', backgroundColor: theme.palette.secondary.main},
{ label: '19 KSats', backgroundColor: theme.palette.secondary.main},
{ label: '4 KSats', backgroundColor: '#f7931a'},
{ label: '4 KSats', backgroundColor: theme.palette.secondary.main},
{ label: '4 KSats', backgroundColor: '#f7931a'}
@ -79,8 +85,21 @@ const WheelSpinPage = () => {
<WinningDialog open={openSpinResult} close={setOpenSpinResult} prizeAmount={wheelItems.items[winningIndex].label} />
<Grid container justifyContent="center" alignItems="center" spacing={3}>
<Grid item xs={6}>
<Grid container direction="column">
<Grid item>
<h1>Join our mailing list to spin the wheel for a chance to win BTC!</h1>
<TextField /><Button variant="contained" color="secondary" onClick={submitHandler}>Submit and Spin!</Button>
</Grid>
<Grid item>
<Grid container spacing={1} alignItems="center">
<Grid item>
<TextField label="Email" variant='filled' size='small' value={emailValue} onChange={handleTextChange}/>
</Grid>
<Grid item>
<Button variant="contained" color="secondary" onClick={submitHandler}>Submit and Spin!</Button>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Grid container justifyContent="center">

6
app/page.jsx
View File

@ -1,6 +1,6 @@
"use client"
import { LineChart, Line, CartesianGrid, XAxis, YAxis } from 'recharts';
import { AppBar, Grid, ThemeProvider, Toolbar } from '@mui/material';
import { AppBar, Grid, ThemeProvider, Toolbar, Typography } from '@mui/material';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import theme from './theme';
@ -35,14 +35,14 @@ const Home = () => {
<div id='mainDiv'>
<AppBar>
<StyledToolbar>
Spokane Bitcoin Club
<Typography variant='h5'>Spokane Bitcoin Club</Typography>
</StyledToolbar>
</AppBar>
<MainPage />
<PerksPage />
<WheelSpinPage />
<CalendarPage />
<GraphPage />
{/* <GraphPage /> */}
<BottomBar />
</div>
</LocalizationProvider>

6
components/InfoCard.jsx
View File

@ -4,15 +4,15 @@ import React from 'react'
const InfoCard = (props) => {
return (
<Card sx={{height: 450}}>
<Card sx={{height: 550}}>
<Container>
<Typography variant="h5" align='center' marginY={4}>{props.title}</Typography>
<Typography variant="h3" align='center' marginY={4}>{props.title}</Typography>
<Box>
<Box marginBottom={4} sx={{textAlign: 'center'}}>
{props.picture}
</Box>
<Box>
<Typography>{props.text}</Typography>
<Typography variant='h5'>{props.text}</Typography>
</Box>
</Box>
</Container>

22
components/MeetupDetails.jsx 100644
View File

@ -0,0 +1,22 @@
import { Dialog, DialogContent, DialogTitle, Typography } from '@mui/material'
import React from 'react'
const MeetupDetails = (props) => {
let date = new Date(props.date);
return (
<Dialog open={props.open} onClose={props.onClose}>
<DialogContent>
<DialogTitle>
<Typography variant='h4' align='center'>Caffeine and Coin</Typography>
</DialogTitle>
<DialogContent>
<Typography variant='h6'>Date & Time: {date.getMonth() + 1}/{date.getDay()}/{date.getFullYear()} at 6:00pm</Typography>
<Typography variant='h6'>Location: Sketchy railway tunnel on the North Side</Typography>
<Typography variant='h6'>Come hang out and dodge hobo knifings while discussing and learning about bitcoin!</Typography>
</DialogContent>
</DialogContent>
</Dialog>
)
}
export default MeetupDetails