setup project

adriandelgg · Feb 5, 2022 · cb9cc30 · cb9cc30
commit cb9cc30
Show file tree

Hide file tree

Showing 25 changed files with 5,503 additions and 0 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+	"extends": ["plugin:react/recommended", "next/core-web-vitals"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,43 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+tsconfig.tsbuildinfo
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# Zero-Installs (Yarn v2)
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
diff --git a/README.md b/README.md
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+	reactStrictMode: true,
+	images: {
+		domains: ['ipfs.io']
+	}
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,41 @@
+{
+	"name": "frontend",
+	"license": "MIT",
+	"author": "Adrian Delgado",
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"animate.css": "^4.1.1",
+		"axios": "^0.25.0",
+		"daisyui": "^1.24.3",
+		"dotenv": "^14.2.0",
+		"hamburger-react": "^2.4.1",
+		"next": "12.0.8",
+		"react": "17.0.2",
+		"react-animated-css": "^1.2.1",
+		"react-dom": "17.0.2",
+		"react-loader-spinner": "^5.0.9",
+		"react-spinner-loader": "^1.1.1",
+		"react-toastify": "^8.0.3",
+		"react-toggle-dark-mode": "^1.0.4"
+	},
+	"devDependencies": {
+		"@tailwindcss/typography": "^0.5.0",
+		"@types/lodash": "^4.14.175",
+		"@types/node": "^17.0.8",
+		"@types/react": "17.0.38",
+		"@types/react-dom": "^17.0.9",
+		"autoprefixer": "^10.3.4",
+		"eslint": "8.7.0",
+		"eslint-config-next": "12.0.8",
+		"eslint-plugin-react-hooks": "^4.2.0",
+		"postcss": "^8.3.6",
+		"tailwindcss": "^3.0.11",
+		"ts-node": "^10.2.1",
+		"typescript": "4.5.4"
+	}
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,17 @@
+import type { AppProps } from 'next/app';
+import 'styles/globals.css';
+import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
+import 'react-toastify/dist/ReactToastify.css';
+import 'animate.css';
+
+import Layout from 'src/context/Layout';
+
+function MyApp({ Component, pageProps }: AppProps) {
+	return (
+		<Layout>
+			<Component {...pageProps} />
+		</Layout>
+	);
+}
+
+export default MyApp;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -0,0 +1,82 @@
+import type { NextPage } from 'next';
+import Head from 'next/head';
+
+const Home: NextPage = () => {
+	return (
+		<>
+			<Head>
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			{/* <section className="text-gray-600 body-font">
+				<div className="container px-5 py-24 mx-auto flex flex-col">
+					<div className="lg:w-4/6 mx-auto">
+						<div className="rounded-lg h-64 overflow-hidden">
+							<img
+								alt="content"
+								className="object-cover object-center h-full w-full"
+								src="https://dummyimage.com/1200x500"
+							/>
+						</div>
+						<div className="flex flex-col sm:flex-row mt-10">
+							<div className="sm:w-1/3 text-center sm:pr-8 sm:py-8">
+								<div className="w-20 h-20 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400">
+									<svg
+										fill="none"
+										stroke="currentColor"
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth="2"
+										className="w-10 h-10"
+										viewBox="0 0 24 24"
+									>
+										<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
+										<circle cx="12" cy="7" r="4"></circle>
+									</svg>
+								</div>
+								<div className="flex flex-col items-center text-center justify-center">
+									<h2 className="font-medium title-font mt-4 text-gray-900 text-lg">
+										Phoebe Caulfield
+									</h2>
+									<div className="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
+									<p className="text-base">
+										Raclette knausgaard hella meggs normcore williamsburg enamel
+										pin sartorial venmo tbh hot chicken gentrify portland.
+									</p>
+								</div>
+							</div>
+							<div className="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left">
+								<p className="leading-relaxed text-lg mb-4">
+									Meggings portland fingerstache lyft, post-ironic fixie man bun
+									banh mi umami everyday carry hexagon locavore direct trade art
+									party. Locavore small batch listicle gastropub farm-to-table
+									lumbersexual salvia messenger bag. Coloring book flannel
+									truffaut craft beer drinking vinegar sartorial, disrupt
+									fashion axe normcore meh butcher. Portland 90's scenester
+									vexillologist forage post-ironic asymmetrical, chartreuse
+									disrupt butcher paleo intelligentsia pabst before they sold
+									out four loko. 3 wolf moon brooklyn.
+								</p>
+								<a className="text-indigo-500 inline-flex items-center">
+									Learn More
+									<svg
+										fill="none"
+										stroke="currentColor"
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										strokeWidth="2"
+										className="w-4 h-4 ml-2"
+										viewBox="0 0 24 24"
+									>
+										<path d="M5 12h14M12 5l7 7-7 7"></path>
+									</svg>
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</section> */}
+		</>
+	);
+};
+
+export default Home;
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,8 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/context/Footer.tsx b/src/context/Footer.tsx
@@ -0,0 +1,16 @@
+export const Footer = () => {
+	return (
+		<footer>
+			<h3 id="contact" className="contact-me">
+				Need a website?
+				<br />
+				Contact me!
+			</h3>
+			<div className="socials-footer">{/* <SocialsMobile /> */}</div>
+			<h5 className="footer-text">© Created by Adrian Delgado 2021</h5>
+			<div className="backup-arrow animation">
+				<a href="#top">^{/* <HiArrowUp size="3em" color="#fdfdfd" /> */}</a>
+			</div>
+		</footer>
+	);
+};
diff --git a/src/context/Layout.tsx b/src/context/Layout.tsx
@@ -0,0 +1,16 @@
+// import { NavBar } from './NavBar/NavBar';
+import { Navbar } from './Navbar/Navbar';
+import Head from 'next/head';
+
+const Layout: React.FC = ({ children }) => (
+	<>
+		<Head>
+			{/* <link rel="icon" href="" /> */}
+			{/* <link rel="shortcut icon" href="" /> */}
+		</Head>
+		<Navbar />
+		<main id="main">{children}</main>
+	</>
+);
+
+export default Layout;
diff --git a/src/context/Navbar/MenuMobile.tsx b/src/context/Navbar/MenuMobile.tsx
@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+
+import Hamburger from 'hamburger-react';
+
+export const MenuMobile = ({ path }: { path: string }) => {
+	const [isOpen, setOpen] = useState(false);
+	const handleClick = () => setOpen(false);
+
+	useEffect(() => {
+		if (isOpen) {
+			document.body.style.overflow = 'hidden';
+			document.getElementById('main')!.style.filter =
+				'blur(5px) brightness(0.7)';
+		} else {
+			document.body.style.overflow = 'visible';
+			document.getElementById('main')!.style.filter = 'none';
+		}
+	});
+
+	return (
+		<>
+			<Hamburger
+				color="#f7bb50"
+				label="Navigation Menu"
+				toggled={isOpen}
+				toggle={setOpen}
+			/>
+			{isOpen ? (
+				<ul
+					id="mobile-nav"
+					className="nav-links animate-mobile animate-back-in"
+				>
+					<li
+						onClick={handleClick}
+						className={path === '/' ? 'active-nav' : 'nav-item'}
+					>
+						<Link href="/">Home</Link>
+					</li>
+					<li
+						onClick={handleClick}
+						className={path === '/' ? 'active-nav' : 'nav-item'}
+					>
+						<Link href="/">About Us</Link>
+					</li>
+					<li
+						onClick={handleClick}
+						className={path === '/' ? 'active-nav' : 'nav-item'}
+					>
+						<Link href="/">Shipping</Link>
+					</li>
+					<li
+						onClick={handleClick}
+						className={path === '/' ? 'active-nav' : 'nav-item'}
+					>
+						<Link href="/">Kittens</Link>
+					</li>
+					<li
+						onClick={handleClick}
+						className={path === '/' ? 'active-nav' : 'nav-item'}
+					>
+						<Link href="/">Contact Us</Link>
+					</li>
+				</ul>
+			) : null}
+		</>
+	);
+};
diff --git a/src/context/Navbar/NavItems.tsx b/src/context/Navbar/NavItems.tsx
@@ -0,0 +1,27 @@
+import Link from 'next/link';
+
+export const NavItems = ({ path }: { path: string }) => {
+	return (
+		<ul className="nav-links">
+			<li className={path === '/' ? 'active-nav' : 'nav-item'}>
+				<Link href="/">Home</Link>
+			</li>
+
+			<li className={path === '/' ? 'active-nav' : 'nav-item'}>
+				<Link href="/">About</Link>
+			</li>
+
+			<li className={path === '/' ? 'active-nav' : 'nav-item'}>
+				<Link href="/">Shipping</Link>
+			</li>
+
+			<li className={path === '/' ? 'active-nav' : 'nav-item'}>
+				<Link href="/">Kittens</Link>
+			</li>
+
+			<li className={path === '/' ? 'active-nav' : 'nav-item'}>
+				<Link href="/">Contact Us</Link>
+			</li>
+		</ul>
+	);
+};
diff --git a/src/context/Navbar/Navbar.tsx b/src/context/Navbar/Navbar.tsx
@@ -0,0 +1,22 @@
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+
+import { useMobile } from '../../hooks/useMobile';
+import { MenuMobile } from './MenuMobile';
+import { NavItems } from './NavItems';
+import { DarkModeToggle } from 'src/helpers/DarkModeToggle';
+
+export const Navbar = () => {
+	const { asPath: path } = useRouter();
+
+	const isMobile = useMobile();
+	return (
+		<header className=" flex justify-between items-center mx-auto w-11/12 h-16">
+			<div>Luxury Only</div>
+			<p>760-222-2222</p>
+			<nav className="flex justify-between items-center">
+				{!isMobile ? <NavItems path={path} /> : <MenuMobile path={path} />}
+			</nav>
+		</header>
+	);
+};
diff --git a/src/helpers/DarkModeToggle.tsx b/src/helpers/DarkModeToggle.tsx
@@ -0,0 +1,17 @@
+import { useState } from "react";
+import { DarkModeSwitch } from "react-toggle-dark-mode";
+
+export const DarkModeToggle = () => {
+	const [isDarkMode, setDarkMode] = useState(false);
+
+	const toggleDarkMode = (checked: boolean) => {
+		setDarkMode(checked);
+		isDarkMode
+			? document.documentElement.classList.remove("dark")
+			: document.documentElement.classList.add("dark");
+	};
+
+	return (
+		<DarkModeSwitch checked={isDarkMode} onChange={toggleDarkMode} size={35} />
+	);
+};
diff --git a/src/helpers/Loading.tsx b/src/helpers/Loading.tsx
@@ -0,0 +1,12 @@
+import { TailSpin } from "react-loader-spinner";
+
+interface Props {
+	isLoading: boolean;
+}
+
+export const Loading = ({ isLoading }: Props) =>
+	isLoading ? (
+		<div className="flex justify-center">
+			<TailSpin color="#009900" height={100} width={100} />
+		</div>
+	) : null;