(false);
@@ -26,7 +26,13 @@ export default function FeedbackUI() {
Thank You!
Feedback:{' '}
- {choice.Unhappy ? 'Unhappy' : choice.Neutral ? 'Neutral' : choice.Satisfied ? 'Satisfied' : 'None'}
+ {choice.Unhappy
+ ? 'Unhappy'
+ : choice.Neutral
+ ? 'Neutral'
+ : choice.Satisfied
+ ? 'Satisfied'
+ : 'None'}
We'll use your feedback to improve our customer support
@@ -34,7 +40,9 @@ export default function FeedbackUI() {
) : (
- How satisfied are you with our customer support performance?
+
+ How satisfied are you with our customer support performance?
+
{[...new Array(500)].map((val, ind: number) => {
- return ;
+ return ;
})}
@@ -25,11 +25,7 @@ function getRandomColor() {
return colors[Math.floor(Math.random() * colors.length)];
}
-interface BoxProps {
- ind: number;
-}
-
-function Box({ ind }: BoxProps) {
+function Box() {
const cardRef = useRef();
function setColor() {
diff --git a/src/pages/image-carousel.tsx b/src/pages/image-carousel.tsx
index 79a1c9c..4b0318a 100644
--- a/src/pages/image-carousel.tsx
+++ b/src/pages/image-carousel.tsx
@@ -15,7 +15,7 @@ export default function ImageCarousel() {
translate++;
if (translate > 3) {
translate = 0;
- imgConRef.current.style.transform = `translateX(0px)`;
+ imgConRef.current.style.transform = 'translateX(0px)';
}
imgConRef.current.style.transform = `translateX(${-translate * 500}px)`;
}, 3000);
@@ -54,7 +54,7 @@ export default function ImageCarousel() {
translate++;
if (translate > 3) {
translate = 0;
- imgConRef.current.style.transform = `translateX(0px)`;
+ imgConRef.current.style.transform = 'translateX(0px)';
}
imgConRef.current.style.transform = `translateX(${-translate * 500}px)`;
}}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d123503..5df2af8 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,15 +1,12 @@
import Head from 'next/head';
import { GetServerSideProps } from 'next';
-import { SiNextDotJs } from 'react-icons/si';
-import styled from 'styled-components';
import axios from 'axios';
+import styled from 'styled-components';
+import { SiNextDotJs } from 'react-icons/si';
import { colors } from '../constants/theme';
import { Container, Heading, Section } from '../components/Utilities';
-import Nav from '../components/NavigationBar';
-import DevCard from '../components/DevCard';
-import Project from '../components/Project';
-import Footer from '../components/Footer';
+import { NavigationBar, DevCard, Project, Footer } from '../components';
export default function Home({ apps, team }: IProps) {
return (
@@ -17,14 +14,14 @@ export default function Home({ apps, team }: IProps) {
7 Days 50 Projects
-
+
50 Projects in 7 Days
Using
- 
+
- 
+
@@ -38,7 +35,7 @@ export default function Home({ apps, team }: IProps) {
day={num + 1}
key={app.file}
image={`screenshots/${app.file}.jpg`}
- link={`/${app.file}`}
+ link={app.file !== 'index' ? `/${app.file}` : '/'}
>
{app.name}
@@ -81,7 +78,7 @@ interface IProps {
}>;
}
-export const getServerSideProps: GetServerSideProps = async _ => {
+export const getServerSideProps: GetServerSideProps = async () => {
const baseUrl =
process.env.NODE_ENV === 'production'
? 'https://7days50projects.vercel.app'
@@ -125,6 +122,10 @@ const Hero = styled.div`
font-size: 3rem;
}
}
+
+ & > * {
+ z-index: 1;
+ }
`;
const BgImage = styled.img`
@@ -132,6 +133,7 @@ const BgImage = styled.img`
width: 60rem;
height: 60rem;
opacity: 0.2;
+ z-index: 0;
@media (max-width: 700px) {
width: 40rem;
diff --git a/src/pages/live-user-filter.tsx b/src/pages/live-user-filter.tsx
index 8b8961f..f5444ec 100644
--- a/src/pages/live-user-filter.tsx
+++ b/src/pages/live-user-filter.tsx
@@ -1,7 +1,7 @@
import Head from 'next/head';
-import styled from 'styled-components';
import { useState, useEffect } from 'react';
import axios from 'axios';
+import styled from 'styled-components';
import { colors } from '../constants/theme';
@@ -57,7 +57,12 @@ export default function FAQ() {
{!load && (
diff --git a/src/pages/movies-app.tsx b/src/pages/movies-app.tsx
index 8b2eae7..1e7973d 100644
--- a/src/pages/movies-app.tsx
+++ b/src/pages/movies-app.tsx
@@ -1,9 +1,9 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
import styled from 'styled-components';
import Head from 'next/head';
import { RiSearch2Line } from 'react-icons/ri';
-import MovieCard from '../components/MovieCard';
+import { MovieCard } from '../components';
import { colors } from '../constants/theme';
import { IconButton } from './netflix-nav';
import axios from 'axios';
@@ -62,7 +62,7 @@ interface MovieProps {
poster_path: string;
}
-export const getServerSideProps: GetServerSideProps = async _ => {
+export const getServerSideProps: GetServerSideProps = async () => {
const response = await axios.get(
'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1'
);
diff --git a/src/pages/netflix-nav.tsx b/src/pages/netflix-nav.tsx
index b1c471c..aee1242 100644
--- a/src/pages/netflix-nav.tsx
+++ b/src/pages/netflix-nav.tsx
@@ -25,6 +25,7 @@ export default function NetflixNavigation() {
diff --git a/src/pages/notes-app.tsx b/src/pages/notes-app.tsx
index 2476a59..b3726b9 100644
--- a/src/pages/notes-app.tsx
+++ b/src/pages/notes-app.tsx
@@ -1,14 +1,14 @@
import { useState } from 'react';
-import Note from '../components/Note';
+import Head from 'next/head';
import styled from 'styled-components';
import { AiOutlinePlus } from 'react-icons/ai';
-import Head from 'next/head';
+import { Note } from '../components';
export default function Home() {
const [notes, setNotes] = useState>([]);
const handleDeleteButtonClick = (i: number) => {
- const result = notes.filter((item, index) => i !== index);
+ const result = notes.filter((_item, index) => i !== index);
setNotes(result);
};
@@ -28,7 +28,13 @@ export default function Home() {
{notes.map((note, index) => (
-
+
))}
diff --git a/src/pages/otp-ui.tsx b/src/pages/otp-ui.tsx
index 0667100..1aa3fb3 100644
--- a/src/pages/otp-ui.tsx
+++ b/src/pages/otp-ui.tsx
@@ -1,8 +1,8 @@
-import styled from 'styled-components';
+import { useRef, KeyboardEvent, ChangeEvent } from 'react';
import Head from 'next/head';
+import styled from 'styled-components';
import { CenterContainer } from '../components/Utilities';
import { colors, sizes } from '../constants/theme';
-import { useRef, KeyboardEvent, ChangeEvent } from 'react';
export default function OTP() {
const references = useRef([]);
diff --git a/src/pages/password-generator.tsx b/src/pages/password-generator.tsx
index 81aacec..e351a08 100644
--- a/src/pages/password-generator.tsx
+++ b/src/pages/password-generator.tsx
@@ -1,3 +1,4 @@
+import Head from 'next/head';
import { useReducer, useRef, useState } from 'react';
import styled from 'styled-components';
import { RiFileCopy2Line, RiAddLine, RiSubtractLine } from 'react-icons/ri';
@@ -6,9 +7,8 @@ import { CenterContainer, Heading, Button, Alert } from '../components/Utilities
import { colors, sizes } from '../constants/theme';
import { initialOptions, reducer } from '../helpers/passgen-reducer';
import { generatePassword } from '../functions/password-generator';
-import Head from 'next/head';
-export default function passwordGenerator() {
+export default function PasswordGenerator() {
const [password, setPassword] = useState('');
const [options, dispatch] = useReducer(reducer, initialOptions);
const [copied, setCopied] = useState(false);
@@ -70,19 +70,35 @@ export default function passwordGenerator() {
Allow Capital letters?
- dispatch('allowCaps')} checked={options.allowCaps} />
+ dispatch('allowCaps')}
+ checked={options.allowCaps}
+ />
Allow small letters?
- dispatch('allowSmall')} checked={options.allowSmall} />
+ dispatch('allowSmall')}
+ checked={options.allowSmall}
+ />
Allow numbers?
- dispatch('allowNumbers')} checked={options.allowNumbers} />
+ dispatch('allowNumbers')}
+ checked={options.allowNumbers}
+ />
Allow special characters?
- dispatch('allowSpecial')} checked={options.allowSpecial} />
+ dispatch('allowSpecial')}
+ checked={options.allowSpecial}
+ />