diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bffb357 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/components/EventCard.tsx b/components/EventCard.tsx new file mode 100644 index 0000000..74e4412 --- /dev/null +++ b/components/EventCard.tsx @@ -0,0 +1,119 @@ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import Card from '@mui/material/Card'; +import CardHeader from '@mui/material/CardHeader'; +import CardMedia from '@mui/material/CardMedia'; + +import CardContent from '@mui/material/CardContent'; +import CardActions from '@mui/material/CardActions'; +import Collapse from '@mui/material/Collapse'; +import Avatar from '@mui/material/Avatar'; +import IconButton, { IconButtonProps } from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import { red } from '@mui/material/colors'; +import FavoriteIcon from '@mui/icons-material/Favorite'; +import ShareIcon from '@mui/icons-material/Share'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; + +interface ExpandMoreProps extends IconButtonProps { + expand: boolean; +} + +const ExpandMore = styled((props: ExpandMoreProps) => { + const { expand, ...other } = props; + return ; +})(({ theme, expand }) => ({ + transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)', + marginLeft: 'auto', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shortest, + }), +})); + +export default function EventCard() { + const [expanded, setExpanded] = React.useState(false); + + const handleExpandClick = () => { + setExpanded(!expanded); + }; + + return ( + + + {/* + R + + } + action={ + + + + } + title="Shrimp and Chorizo Paella" + subheader="September 14, 2016" + /> */} + + + + + This impressive paella is a perfect party dish and a fun meal to cook + together with your guests. Add 1 cup of frozen peas along with the mussels, + if you like. + + + + + + + + + + + + + + + + Method: + + Heat 1/2 cup of the broth in a pot until simmering, add saffron and set + aside for 10 minutes. + + + Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over + medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring + occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a + large plate and set aside, leaving chicken and chorizo in the pan. Add + pimentón, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook, + stirring often until thickened and fragrant, about 10 minutes. Add + saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil. + + + Add rice and stir very gently to distribute. Top with artichokes and + peppers, and cook without stirring, until most of the liquid is absorbed, + 15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and + mussels, tucking them down into the rice, and cook again without + stirring, until mussels have opened and rice is just tender, 5 to 7 + minutes more. (Discard any mussels that don't open.) + + + Set aside off of the heat to let rest for 10 minutes, and then serve. + + + + + ); +} diff --git a/components/Layout.js b/components/Layout.js new file mode 100644 index 0000000..c3d2293 --- /dev/null +++ b/components/Layout.js @@ -0,0 +1,118 @@ +import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import Typography from "@mui/material/Typography"; +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; +import Avatar from "@mui/material/Avatar"; +import Link from "next/link"; +import classes from "./Layout.module.css"; +import MenuIcon from '@mui/icons-material/Menu'; +import { IconButton } from "@mui/material"; +import { useState } from "react"; +import { Drawer } from "@mui/material"; + +const Layout = (props) => { + const [isDrawerOpen, setIsDrawerOpen] = useState(false); + + const navItems = [ + { + title: "Home", + href: "/", + }, + { + title: "About Us", + href: "/about", + }, + { + title: "Events", + href: "/events", + }, + ]; + + return ( + <> + + + + + + + OS Code + + + +
+ {navItems.map((item) => ( + + + + ))} + + + +
+ setIsDrawerOpen(true)} sx={{ display: { sx: "static", lg: "none" }}}> + + + setIsDrawerOpen(false)} + sx={{ display: { sx: "static", md: "none" }}} + > + + {navItems.map((item) => ( + + + + ))} + + + + + + + +
{props.children}
+ +
+ + OS Code + + + © {new Date().getFullYear()}, Made by Team OS Code + +
+ + + ); +}; + +export default Layout; diff --git a/components/Layout.module.css b/components/Layout.module.css new file mode 100644 index 0000000..a28c2fc --- /dev/null +++ b/components/Layout.module.css @@ -0,0 +1,45 @@ +.appBarBg { + background: rgba(22, 21, 21, 0.35); + /* box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); */ + backdrop-filter: blur(5.5px); + -webkit-backdrop-filter: blur(5.5px); + border: 1px solid rgba(255, 255, 255, 0.18); + color: aliceblue; +} +.btn { + transition: 0.3s; + color: aliceblue; +} +.btn:hover { + background: #00c9ff; /* fallback for old browsers */ + background: -webkit-linear-gradient( + to right, + #92fe9d, + #00c9ff + ); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient( + to right, + #92fe9d, + #00c9ff + ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + -webkit-animation: btn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: btn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.footer { + color: aliceblue; + background-image: linear-gradient( + 134.6deg, + rgba(201, 37, 107, 1) 15.4%, + rgba(116, 16, 124, 1) 74.7% + ); + padding-top: 10px; + padding-bottom: 10px; +} +@media screen and (max-width: 900px) { + .navItemsLg{ + display: none; + } +} + diff --git a/pages/_app.tsx b/pages/_app.tsx index 25054b5..abd0a29 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,11 +1,13 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { AppProps } from 'next/app'; -import { ThemeProvider } from '@mui/material/styles'; -import CssBaseline from '@mui/material/CssBaseline'; -import { CacheProvider, EmotionCache } from '@emotion/react'; -import theme from '../src/theme'; -import createEmotionCache from '../src/createEmotionCache'; +import Head from "next/head"; +import { AppProps } from "next/app"; +import { ThemeProvider } from "@mui/material/styles"; +import CssBaseline from "@mui/material/CssBaseline"; +import { CacheProvider, EmotionCache } from "@emotion/react"; +import theme from "../src/theme"; +import createEmotionCache from "../src/createEmotionCache"; +import '../src/styles/global.css'; + +import Layout from "../components/Layout"; // Client-side cache, shared for the whole session of the user in the browser. const clientSideEmotionCache = createEmotionCache(); @@ -19,12 +21,15 @@ export default function MyApp(props: MyAppProps) { return ( + OS Code {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} - + + + ); diff --git a/pages/_document.tsx b/pages/_document.tsx index 6e31d24..4502e19 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,8 +1,8 @@ -import * as React from 'react'; -import Document, { Html, Head, Main, NextScript } from 'next/document'; -import createEmotionServer from '@emotion/server/create-instance'; -import theme from '../src/theme'; -import createEmotionCache from '../src/createEmotionCache'; +import * as React from "react"; +import Document, { Html, Head, Main, NextScript } from "next/document"; +import createEmotionServer from "@emotion/server/create-instance"; +import theme from "../src/theme"; +import createEmotionCache from "../src/createEmotionCache"; export default class MyDocument extends Document { render() { @@ -11,7 +11,7 @@ export default class MyDocument extends Document { {/* PWA primary color */} - + { const emotionStyles = extractCriticalToChunks(initialProps.html); const emotionStyleTags = emotionStyles.styles.map((style) => (