Merge pull request #1 from daveymason/homepage

Homepage

components/Intro.jsx

@@ -1,6 +1,24 @@
-import { Box, Typography, Divider } from '@mui/material';
+import { Box, Typography } from '@mui/material';
+import GroupButton from '@components/ui/GroupButton/GroupButton';
+
+import HomeIcon from '@mui/icons-material/Home';
+import InfoIcon from '@mui/icons-material/Info';
+import LocalHospitalIcon from '@mui/icons-material/LocalHospital';
+import PetsIcon from '@mui/icons-material/Pets';
+import RoofingIcon from '@mui/icons-material/Roofing';
+import EmailIcon from '@mui/icons-material/Email';
 
 export default function Intro({ title, text }) {
+  const buttons = [
+    { label: '', icon: <InfoIcon />, style: { backgroundColor: '#ffb74d' } },
+    { label: '', icon: <LocalHospitalIcon />, style: { backgroundColor: '#81c784' } },
+    { label: '', icon: <PetsIcon />, style: { backgroundColor: '#9575cd' } },
+    { label: '', icon: <RoofingIcon />, style: { backgroundColor: '#64b5f6' } },
+    { label: '', icon: <EmailIcon />, style: { backgroundColor: '#e57373' } },
+  ];
+
+
+
   return (
     <Box
       className="jumbotron"
@@ -9,13 +27,13 @@ export default function Intro({ title, text }) {
       justifyContent="center"
       flexDirection="column"
     >
-      <Typography variant="h1" component="h1" sx={{ mb: 5, color: '#734b2e' }}>
+      <Typography variant="h1" component="h1" sx={{ mb: 3, color: '#734b2e' }}>
         {title}
       </Typography>
-      <Divider />
       <Typography variant="subtitle1" sx={{ p: 3 }}>
         {text}
       </Typography>
+      <GroupButton buttons={buttons} />
     </Box>
   );
 }

components/Jumbotron.jsx

@@ -3,19 +3,19 @@ import { Box, Typography, Divider } from '@mui/material';
 export default function Jumbotron({ title, text }) {
   return (
     <Box
-      className="jumbotron"
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      flexDirection="column"
-    >
-      <Typography variant="h1" component="h1" sx={{ mb: 5, color: '#734b2e' }}>
-        {title}
-      </Typography>
-      <Divider />
-      <Typography variant="subtitle1" sx={{ p: 3 }}>
-        {text}
-      </Typography>
-    </Box>
+    className="jumbotron"
+    display="flex"
+    alignItems="center"
+    justifyContent="center"
+    flexDirection="column"
+  >
+    <Typography variant="h3" component="h1" sx={{ p: 2, color: '#734b2e' }}>
+      {title}
+    </Typography>
+    <Divider />
+    <Typography variant="subtitle1" sx={{ p: 3, color: '#333' }}>
+      {text}
+    </Typography>
+  </Box>
   );
 }

components/LanguageSwitcher.jsx

@@ -0,0 +1,59 @@
+import React, { useState, useContext } from "react";
+import { ButtonGroup, Radio } from "@mui/material";
+
+  //check if there are any props being passed to the component
+  //if there are, use them, if not, use the default value
+
+function LanguageSwitcher() {
+  const [language, setLanguage] = useState("english");
+
+  const handleLanguageChange = (event) => {
+    setLanguage(event.target.value);
+    alert(event.target.value
+      ? "Language changed to " + event.target.value
+      : "Language not changed"
+    );
+  };
+
+  return (
+
+  <ButtonGroup size="small" aria-label="language" color="primary">
+    <Radio
+      checked={language === "english"}
+      onChange={handleLanguageChange}
+      value="english"
+      icon={
+        <img
+          src="/englishIcon.png"
+          alt="English"
+          style={{ height: "1.5rem" }}
+        />
+      }
+      checkedIcon={
+        <img
+          src="/englishIcon.png"
+          alt="EnglishChecked"
+          style={{ height: "2.5rem" }}
+        />
+      }
+    />
+    <Radio
+      checked={language === "turkish"}
+      onChange={handleLanguageChange}
+      value="turkish"
+      icon={
+        <img src="/turkeyIcon.png" alt="Turkish" style={{ height: "1.5rem" }} />
+      }
+      checkedIcon={
+        <img
+          src="/turkeyIcon.png"
+          alt="TurkishChecked"
+          style={{ height: "2.5rem" }}
+        />
+      }
+    />
+  </ButtonGroup>
+  );
+}
+
+export default LanguageSwitcher;

components/MenuComponent.jsx

@@ -1,48 +1,27 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useContext } from 'react';
 import { Grid, AppBar, Button, IconButton, Toolbar, ButtonGroup, Radio } from '@mui/material';
-import HomeIcon from '@mui/icons-material/Home';
 import InfoIcon from '@mui/icons-material/Info';
 import LocalHospitalIcon from '@mui/icons-material/LocalHospital';
 import PetsIcon from '@mui/icons-material/Pets';
 import RoofingIcon from '@mui/icons-material/Roofing';
 import EmailIcon from '@mui/icons-material/Email';
 
-import LanguageIcon from '@mui/icons-material/Language';
 import classNames from 'classnames';
 
-function MenuComponent() {
-  const [scrollPosition, setScrollPosition] = useState(0);
-  const [offsetTop, setOffsetTop] = useState(0);
-  const [language, setLanguage] = useState('english');
+import { LanguageContext } from 'context/LanguageContext';
+import LanguageSwitcher from '@components/LanguageSwitcher';
 
-  const appBarRef = useRef(null);
+function MenuComponent() {
+  const { language, setLanguage } = useContext(LanguageContext);
+  console.log('language', language);
 
   const handleLanguageChange = (event) => {
     setLanguage(event.target.value);
   };
 
-  useEffect(() => {
-    function handleScroll() {
-      setScrollPosition(window.pageYOffset);
-    }
-
-    window.addEventListener('scroll', handleScroll);
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (appBarRef.current) {
-      setOffsetTop(appBarRef.current.offsetTop);
-    }
-  }, [appBarRef]);
-
   const stickyClass = classNames({
     'app-bar': true,
-    sticky: scrollPosition >= offsetTop,
-  });
+    'sticky': true,  });
 
   const toolbarClass = 'toolbar';
   const linkClass = classNames({
@@ -51,63 +30,42 @@ function MenuComponent() {
   });
 
   return (
-<AppBar position="static" ref={appBarRef} className={stickyClass}>
+    <LanguageContext.Provider value={language}>
+      <AppBar position="static" className={stickyClass}>
   <Toolbar className={toolbarClass} >
     <Grid container justifyContent="space-between">
-    <IconButton edge="start" color="inherit" aria-label="menu">
+    <IconButton edge="start" color="inherit" aria-label="menu" className={linkClass}>
       <img src="/logoWhite.png" alt="Logo" style={{ height: '3rem' }} />
     </IconButton>
     <Button color="inherit" className={linkClass}>
       <InfoIcon />
-      About
+      {language === 'english' ? 'About' : 'Hakkında'}
     </Button>
     <Button color="inherit" className={linkClass}>
       <LocalHospitalIcon />
-      Health
+      {language === 'english' ? 'Health' : 'Sağlık'}
     </Button>
     <Button color="inherit" className={linkClass}>
       <PetsIcon />
-      Age
+      {language === 'english' ? 'Age' : 'Yaş'}
     </Button>
     <Button color="inherit" className={linkClass}>
       <RoofingIcon />
-      Rescue
+      {language === 'english' ? 'Rescue' : 'Kurtarma'}
     </Button>
     <Button color="inherit" className={linkClass}>
       <EmailIcon />
-      Contact
+      {language === 'english' ? 'Contact' : 'İletişim'}
     </Button>
+    <LanguageSwitcher language={language} />
     <div className="language-buttons">
-      <ButtonGroup size="small" aria-label="language" color="primary">
-        <Radio
-          checked={language === 'english'}
-          onChange={handleLanguageChange}
-          value="english"
-          icon={
-            <img src="/englishIcon.png" alt="English" style={{ height: '1.5rem' }} />
-          }
-          checkedIcon={
-            <img
-              src="/englishIcon.png"
-              alt="EnglishChecked"
-              style={{ height: '2.5rem' }}
-            />
-          }
-        />
-            <Radio
-              checked={language === 'turkish'}
-              onChange={handleLanguageChange}
-              value="turkish"
-              icon={<img src="/turkeyIcon.png" alt="Turkish" style={{ height: '1.5rem' }} />
-            }
-              checkedIcon={<img src="/turkeyIcon.png" alt="TurkishChecked" style={{ height: '2.5rem' }} />
-            }
-            />
-          </ButtonGroup>
+
         </div>
       </Grid>
       </Toolbar>
       </AppBar>
+
+    </LanguageContext.Provider>
   );
 }
 

components/ui/GroupButton/GroupButton.css

@@ -0,0 +1,14 @@
+.button-container {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  .button {
+    display: flex;
+    align-items: center;
+    margin: 10px;
+    padding: 10px 20px;
+  box-shadow: 2px 2px 4px #282828;
+  border-radius: 10px;
+  }
+

components/ui/GroupButton/GroupButton.jsx

@@ -0,0 +1,21 @@
+import { Button } from '@mui/material';
+
+const GroupButton = ({ buttons }) => {
+  return (
+    <div className="button-container">
+      {buttons.map((button) => (
+        <Button
+          key={button.label}
+          variant="contained"
+          color={button.color}
+          className="button"
+          style={button.style}
+        >
+            {button.icon}
+        </Button>
+      ))}
+    </div>
+  );
+};
+
+export default GroupButton;

context/LanguageContext.jsx

@@ -0,0 +1,18 @@
+import React, { createContext, useState } from 'react';
+
+export const LanguageContext = createContext();
+
+function LanguageProvider({ children }) {
+    const [language, setLanguage] = useState('english');
+    const value = {
+      language,
+      setLanguage
+    };
+    return (
+      <LanguageContext.Provider value={value}>
+        {children}
+      </LanguageContext.Provider>
+    );
+  }
+
+export default LanguageProvider;

context/LanguageProvider.jsx

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import { LanguageContext } from 'context/LanguageContext';
+
+function LanguageProvider({ children }) {
+  const [language, setLanguage] = useState('english');
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+}
+
+export default LanguageProvider;

pages/_app.js

@@ -1,7 +1,15 @@
-import '@styles/globals.css'
+import React from 'react';
+import Head from 'next/head';
+import '@styles/globals.css';
+
+import LanguageProvider from 'context/LanguageContext';
 
 function Application({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <LanguageProvider>
+      <Component {...pageProps} />
+    </LanguageProvider>
+  );
 }
 
-export default Application
+export default Application;