OSCode-Community · mehul131001 · Jun 10, 2022 · Jun 11, 2022 · Jun 11, 2022 · Jun 11, 2022
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/components/EventCard.tsx 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 <IconButton {...other} />;
+})(({ 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 (
+    <Card sx={{ maxWidth: 345}}>
+
+      {/* <CardHeader
+        avatar={
+          <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
+            R
+          </Avatar>
+        }
+        action={
+          <IconButton aria-label="settings">
+            <MoreVertIcon />
+          </IconButton>
+        }
+        title="Shrimp and Chorizo Paella"
+        subheader="September 14, 2016"
+      /> */}
+      <CardMedia
+        component="img"
+        height="194"
+        image="/static/images/cards/paella.jpg"
+        alt="Paella dish"
+      />
+      <CardHeader title="Shrimp and Chorizo Paella" />
+      <CardContent>
+        <Typography variant="body2" color="text.secondary">
+          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.
+        </Typography>
+      </CardContent>
+      <CardActions disableSpacing>
+        <IconButton aria-label="add to favorites">
+          <FavoriteIcon />
+        </IconButton>
+        <IconButton aria-label="share">
+          <ShareIcon />
+        </IconButton>
+        <ExpandMore
+          expand={expanded}
+          onClick={handleExpandClick}
+          aria-expanded={expanded}
+          aria-label="show more"
+        >
+          <ExpandMoreIcon />
+        </ExpandMore>
+      </CardActions>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CardContent>
+          <Typography paragraph>Method:</Typography>
+          <Typography paragraph>
+            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
+            aside for 10 minutes.
+          </Typography>
+          <Typography paragraph>
+            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.
+          </Typography>
+          <Typography paragraph>
+            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&apos;t open.)
+          </Typography>
+          <Typography>
+            Set aside off of the heat to let rest for 10 minutes, and then serve.
+          </Typography>
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+}
diff --git a/components/Layout.js 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 (
+    <>
+      <Box sx={{ background: "black" }}>
+        <AppBar position="fixed" className={classes.appBarBg}>
+          <Toolbar>
+            <Avatar
+              src="/logo.jpeg"
+              alt="oscode logo"
+              sx={{
+                width: { xs: "2rem", md: "3rem" },
+                height: { xs: "2rem", md: "3rem" },
+                marginRight: "12px",
+              }}
+            />
+            <Link href="/">
+              <Typography variant="h6" edge="start" flexGrow={1}>
+                OS Code
+              </Typography>
+            </Link>
+
+            <div className={classes.navItemsLg}>
+              {navItems.map((item) => (
+                <Link href={item.href} key={item.title}>
+                  <Button
+                    color="inherit"
+                    edge="end"
+                    sx={{ mx: 1 }}
+                    className={classes.btn}
+                  >
+                    {item.title}
+                  </Button>
+                </Link>
+              ))}
+              <Link href="/contact">
+                <Button edge="end" sx={{ mx: 1 }} variant="outlined">
+                  {" "}
+                  Contact Us{" "}
+                </Button>
+              </Link>
+            </div>
+            <IconButton size="large" edge="start" color="inherit" aria-label="logo" onClick={() => setIsDrawerOpen(true)} sx={{ display: { sx: "static", lg: "none" }}}>
+              <MenuIcon />
+            </IconButton>
+            <Drawer
+              anchor="right"
+              open={isDrawerOpen}
+              onClose={() => setIsDrawerOpen(false)}
+              sx={{ display: { sx: "static", md: "none" }}}
+            >
+              <Box p={2} textAlign="center" width='280px' role="presentation" sx={{ flexDirection: "column"}}>
+                {navItems.map((item) => (
+                  <Link href={item.href} key={item.title}>
+                    <Button
+                      color="inherit"
+                      edge="end"
+                      sx={{ mx: 1 }}
+                    >
+                      {item.title}
+                    </Button>
+                  </Link>
+                ))}
+                <Link href="/contact">
+                  <Button edge="end" sx={{ mx: 1 }} variant="outlined">
+                    {" "}
+                    Contact Us{" "}
+                  </Button>
+                </Link>
+              </Box>
+            </Drawer>
+          </Toolbar>
+        </AppBar>
+        <main style={{ paddingTop: "4.3rem", paddingBottom: "4rem", minHeight:"52.3rem" }}>{props.children}</main>
+
+        <footer className={classes.footer}>
+          <Typography variant="h6" align="center" gutterBottom>
+            OS Code
+          </Typography>
+          <Typography variant="subtitle1" align="center" component="p">
+            © {new Date().getFullYear()}, Made by Team OS Code
+          </Typography>
+        </footer>
+      </Box>
+    </>
+  );
+};
+
+export default Layout;
diff --git a/components/Layout.module.css 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
@@ -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 (
     <CacheProvider value={emotionCache}>
       <Head>
+        <title>OS Code</title>
         <meta name="viewport" content="initial-scale=1, width=device-width" />
       </Head>
       <ThemeProvider theme={theme}>
         {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
         <CssBaseline />
-        <Component {...pageProps} />
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
       </ThemeProvider>
     </CacheProvider>
   );

diff --git 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 {
         <Head>
           {/* PWA primary color */}
           <meta name="theme-color" content={theme.palette.primary.main} />
-          <link rel="shortcut icon" href="/static/favicon.ico" />
+          <link rel="shortcut icon" href="/favicon.ico" />
           <link
             rel="stylesheet"
             href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
@@ -74,7 +74,7 @@ MyDocument.getInitialProps = async (ctx) => {
   const emotionStyles = extractCriticalToChunks(initialProps.html);
   const emotionStyleTags = emotionStyles.styles.map((style) => (
     <style
-      data-emotion={`${style.key} ${style.ids.join(' ')}`}
+      data-emotion={`${style.key} ${style.ids.join(" ")}`}
       key={style.key}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: style.css }}

diff --git a/pages/about.tsx b/pages/about.tsx