From 399eb487d69c89bdb439c8686ff0349646e00c8a Mon Sep 17 00:00:00 2001
From: KrishnaMoorthy12
Date: Thu, 24 Jun 2021 07:41:42 +0530
Subject: [PATCH 1/8] stacked benxene logo behind text and tech logos in hero
---
src/pages/index.tsx | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d123503..a2a4617 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -125,6 +125,10 @@ const Hero = styled.div`
font-size: 3rem;
}
}
+
+ & > * {
+ z-index: 1;
+ }
`;
const BgImage = styled.img`
@@ -132,6 +136,7 @@ const BgImage = styled.img`
width: 60rem;
height: 60rem;
opacity: 0.2;
+ z-index: 0;
@media (max-width: 700px) {
width: 40rem;
From c481da7de8bd22c96481ab1f1003b81a752ebdcc Mon Sep 17 00:00:00 2001
From: KrishnaMoorthy12
Date: Thu, 24 Jun 2021 07:59:12 +0530
Subject: [PATCH 2/8] added index export for components
---
src/components/index.ts | 13 +++++++++++++
src/pages/double-click-like.tsx | 2 +-
src/pages/drawing-app.tsx | 1 -
src/pages/index.tsx | 11 ++++-------
src/pages/live-user-filter.tsx | 9 +++++++--
src/pages/movies-app.tsx | 2 +-
src/pages/notes-app.tsx | 12 +++++++++---
src/pages/otp-ui.tsx | 4 ++--
src/pages/password-generator.tsx | 26 +++++++++++++++++++++-----
src/pages/password-strength-blur.tsx | 6 +++---
src/pages/ripple-button.tsx | 2 +-
src/pages/skeleton.tsx | 8 ++++++--
src/pages/social-card.tsx | 4 +---
src/pages/split-landing-page.tsx | 10 ++++++----
src/pages/testimonial.tsx | 6 +++---
src/pages/theme-clock.tsx | 17 +++++++++++++++--
src/pages/toast-notification.tsx | 2 +-
src/pages/vertical-slider.tsx | 26 +++++++++++++++++++-------
18 files changed, 113 insertions(+), 48 deletions(-)
create mode 100644 src/components/index.ts
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..6137572
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,13 @@
+export { default as Avatar } from './Avatar';
+export { default as DevCard } from './DevCard';
+export { default as ExpansionPanel } from './ExpansionPanel';
+export { default as Footer } from './Footer';
+export { default as InstaPost } from './InstaPost';
+export { default as MovieCard } from './MovieCard';
+export { default as NavigationBar } from './NavigationBar';
+export { default as Note } from './Note';
+export { default as Project } from './Project';
+export { default as Rating } from './Rating';
+export { default as RippleButton } from './RippleButton';
+export { default as Slider } from './Slider';
+export { default as Switch } from './Switch';
diff --git a/src/pages/double-click-like.tsx b/src/pages/double-click-like.tsx
index 61be2ed..f1d7f0e 100644
--- a/src/pages/double-click-like.tsx
+++ b/src/pages/double-click-like.tsx
@@ -1,7 +1,7 @@
import Head from 'next/head';
import { CenterContainer } from '../components/Utilities';
-import InstaPost from '../components/InstaPost';
+import { InstaPost } from '../components';
export default function DoubleClickLike() {
return (
diff --git a/src/pages/drawing-app.tsx b/src/pages/drawing-app.tsx
index 448e70c..ce48871 100644
--- a/src/pages/drawing-app.tsx
+++ b/src/pages/drawing-app.tsx
@@ -3,7 +3,6 @@ import { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';
import { Alert } from '../components/Utilities';
-
import { colors } from '../constants/theme';
type Coordinates = {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a2a4617..b777721 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,7 +14,7 @@ export default function Home({ apps, team }: IProps) {
7 Days 50 Projects
-
+
50 Projects in 7 Days
Using
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..2823844 100644
--- a/src/pages/movies-app.tsx
+++ b/src/pages/movies-app.tsx
@@ -3,7 +3,7 @@ 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';
diff --git a/src/pages/notes-app.tsx b/src/pages/notes-app.tsx
index 2476a59..bc4ef72 100644
--- a/src/pages/notes-app.tsx
+++ b/src/pages/notes-app.tsx
@@ -1,8 +1,8 @@
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>([]);
@@ -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..8b84b3f 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,7 +7,6 @@ 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() {
const [password, setPassword] = useState('');
@@ -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}
+ />
-
+
diff --git a/src/components/InstaPost.tsx b/src/components/InstaPost.tsx
index 5a69edd..9550900 100644
--- a/src/components/InstaPost.tsx
+++ b/src/components/InstaPost.tsx
@@ -1,10 +1,10 @@
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
import styled, { keyframes } from 'styled-components';
import { RiHeart2Line, RiHeart2Fill, RiShareFill, RiChat3Line } from 'react-icons/ri';
import { sizes } from '../constants/theme';
import Avatar from './Avatar';
-import { useEffect, useRef, useState } from 'react';
-import Image from 'next/image';
export default function InstaPost({ avatar, name, image }: IPost) {
const [likes, setLikes] = useState(0);
@@ -61,7 +61,15 @@ export default function InstaPost({ avatar, name, image }: IPost) {
return (
-
+
0} onClick={() => handleTap()}>
{likes === 0 ? (
diff --git a/src/components/MovieCard.tsx b/src/components/MovieCard.tsx
index bba3730..aba5e37 100644
--- a/src/components/MovieCard.tsx
+++ b/src/components/MovieCard.tsx
@@ -8,7 +8,7 @@ export default function MovieCard(props: IMovie) {
return (