chad/chadsreactproject
1
0
Fork 0
mirror of https://github.com/DevEhChad/chadsreactproject.git synced 2025-11-09 05:51:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source 
Third  Commit
This commit is contained in:
Dev EhChad
2023-05-01 08:52:34 -04:00
committed by GitHub
parent 5f1a55f931
commit 1527b5c20a
20 changed files with 706 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Footer.js
View File

@@ -1,22 +1,22 @@
import React from "react";
import InstagramIcon from '@mui/icons-material/Instagram';
import TwitterIcon from '@mui/icons-material/Twitter';
import FacebookIcon from '@mui/icons-material/Facebook';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import "../styles/Footer.css";
function Footer() {
return (
<div className="footer">
<div className="socialMedia">
<a href="https://www.instagram.com/"><InstagramIcon /> </a>
<a href="https://twitter.com/home"><TwitterIcon /> </a>
<a href="https://www.facebook.com/"><FacebookIcon /> </a>
<a href="https://www.linkedin.com/"><LinkedInIcon /> </a>
</div>
<p> &copy; 2023 chadstestsite.com</p>
</div>
);
}
import React from "react";
import InstagramIcon from '@mui/icons-material/Instagram';
import TwitterIcon from '@mui/icons-material/Twitter';
import FacebookIcon from '@mui/icons-material/Facebook';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import "../styles/Footer.css";
function Footer() {
return (
<div className="footer">
<div className="socialMedia">
<a href="https://www.instagram.com/"><InstagramIcon /> </a>
<a href="https://twitter.com/home"><TwitterIcon /> </a>
<a href="https://www.facebook.com/"><FacebookIcon /> </a>
<a href="https://www.linkedin.com/"><LinkedInIcon /> </a>
</div>
<p> &copy; 2023 chadstestsite.com</p>
</div>
);
}
export default Footer;

76
src/components/Navbar.js
View File

@@ -1,38 +1,38 @@
import React, { useState } from 'react';
import Logo from '../assets/images.png';
import { Link } from 'react-router-dom';
import ReorderIcon from '@mui/icons-material/Reorder';
import '../styles/Navbar.css'
function Navbar() {
const [openLinks, setOpenLinks] = useState(false);
const toggleNavbar = () => {
setOpenLinks(!openLinks);
};
return (
<div className='navbar'>
<div className='leftSide' id={openLinks ? "open" : "close"}>
<img src={Logo} />
<div className='hiddenLinks'>
<Link to="/"> Home </Link>
<Link to="/menu"> Shop </Link>
<Link to="/about"> About </Link>
<Link to="/contact"> Contact </Link>
</div>
</div>
<div className='rightSide'>
<Link to="/"> Home </Link>
<Link to="/menu"> Shop </Link>
<Link to="/about"> About </Link>
<Link to="/contact"> Contact </Link>
<button onClick={toggleNavbar}>
<ReorderIcon />
</button>
</div>
</div>
)
}
export default Navbar
import React, { useState } from 'react';
import Logo from '../assets/images.png';
import { Link } from 'react-router-dom';
import ReorderIcon from '@mui/icons-material/Reorder';
import '../styles/Navbar.css'
function Navbar() {
const [openLinks, setOpenLinks] = useState(false);
const toggleNavbar = () => {
setOpenLinks(!openLinks);
};
return (
<div className='navbar'>
<div className='leftSide' id={openLinks ? "open" : "close"}>
<img src={Logo} />
<div className='hiddenLinks'>
<Link to="/"> Home </Link>
<Link to="/shop"> Shop </Link>
<Link to="/about"> About </Link>
<Link to="/contact"> Contact </Link>
</div>
</div>
<div className='rightSide'>
<Link to="/"> Home </Link>
<Link to="/shop"> Shop </Link>
<Link to="/about"> About </Link>
<Link to="/contact"> Contact </Link>
<button onClick={toggleNavbar}>
<ReorderIcon />
</button>
</div>
</div>
)
}
export default Navbar

24
src/components/ShopItem.js
View File

@@ -1,13 +1,13 @@
import React from "react";
function ShopItem({ image, name, price }) {
return (
<div className="shopItem">
<div style={{ backgroundImage: `url(${image})` }}> </div>
<h1> {name} </h1>
<p> ${price} </p>
</div>
);
}
import React from "react";
function ShopItem({ image, name, price }) {
return (
<div className="shopItem">
<div style={{ backgroundImage: `url(${image})` }}> </div>
<h1> {name} </h1>
<p> ${price} </p>
</div>
);
}
export default ShopItem;