Skip to content
This repository was archived by the owner on Feb 8, 2023. It is now read-only.

removed chakra-ui & revamped website #171

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

removed chakra-ui & revamped website #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
137fffd
removed chakra-ui & revamped website
varshney-himanshu Sep 5, 2022
818f66b
fixed ' error
varshney-himanshu Sep 5, 2022
6f30b30
removed all the chakra-ui imports
varshney-himanshu Sep 5, 2022
67b4d3c
removed chakra-ui & revamped website
varshney-himanshu Sep 5, 2022
727b4a0
fixed ' error
varshney-himanshu Sep 5, 2022
35983d7
removed all the chakra-ui imports
varshney-himanshu Sep 5, 2022
9c7038b
integrated stats api
varshney-himanshu Sep 7, 2022
acbc1ef
fixed deployment error
varshney-himanshu Sep 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@ const nextConfig = {
reactStrictMode: true,
swcMinify: true,
images: {
domains: ["avatars.githubusercontent.com"],
domains: [
"avatars.githubusercontent.com",
"raw.githubusercontent.com",
"i.picsum.photos",
"picsum.photos",
],
},
};

Expand Down
9,189 changes: 3,444 additions & 5,745 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
"local-prod": "next build && next start"
},
"dependencies": {
"@chakra-ui/react": "^2.3.1",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@fontsource/inter": "^4.5.12",
"axios": "^0.27.2",
"next": "12.2.5",
"react": "18.2.0",
"react-dom": "18.2.0",
Expand All @@ -29,6 +29,7 @@
"eslint-config-next": "12.2.5",
"eslint-config-prettier": "^8.5.0",
"prettier": "^2.7.1",
"sass": "^1.54.8",
"typescript": "4.8.2"
}
}
}
4 changes: 4 additions & 0 deletions src/components/button/button.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.button {
padding: 0.5rem;
display: block;
}
54 changes: 54 additions & 0 deletions src/components/button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import Link from "next/link";

import styles from "./styles.module.scss";
import React from "react";

interface Props {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use Type Aliases instead of Interfaces just for following a uniform standard practice across the project's source code?

I used Type Aliases elsewhere mainly because I don't need them to be extended & composed for say a third-party user. Generally speaking for internal usages (as in not to be imported in to a third-party project), Type Aliases are the way to go.

isLink: boolean;
isExternal: boolean;
href: string;
onClick: Function;
text: string;
}

const defaultProps: Props = {
isLink: false,
isExternal: false,
href: "",
onClick: () => {},
text: "Button Text",
};

function Button(props: Props) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The props parameter can be directly destructured (and is the recommended approach to writing Functional Components right now).

Here's an example:

function Button({ props }: PropTypes) {
  return <>Some JSX Element</>
}

const { isLink, isExternal, href, onClick, text } = props;

let button;

let style = styles.button;
console.log(style);

if (isLink) {
button = (
<Link className={style} href={href}>
<a target={isExternal ? "_blank" : "_self"}>{text}</a>
</Link>
);
} else {
button = (
<button
className={style}
onClick={() => {
onClick();
}}
>
{text}
</button>
);
}

return <>{button}</>;
}

Button.defaultProps = defaultProps;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving forward with Functional Components, using defaultProps is redundant. You can now directly default values to the props like the example below:

function Button({ 
  isLink = false,
  isExternal = false,
  href = "",
  onClick: () => {},
  text = "Button Text"
}: PropTypes) {
  return <>Some JSX Elemet</>
}

This is way MORE readable, has less code to write & follows the uniform standard across the rest of the source code.

For more information on the same, refer to the official documentations.


export default Button;
40 changes: 40 additions & 0 deletions src/components/cta/cta.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
.cta {
padding-top: 20px;
h2 {
padding: 0 2rem;
}

.divider {
width: 100%;
height: 10px;

background: linear-gradient(
90deg,
#f27750 -0.03%,
#ffffff 50.5%,
#22f576 100%
);

margin-bottom: 10rem;
}

.divider2 {
width: 100%;
height: 10px;

background: linear-gradient(
90deg,
#f27750 -0.03%,
#ffffff 50.5%,
#22f576 100%
);

margin-top: 10rem;
}

.text {
text-align: center;
margin-bottom: 2rem;
padding: 0 2rem;
}
}
36 changes: 13 additions & 23 deletions src/components/cta/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,21 @@
import SocialButtons from "../social-buttons";
import { Center, Heading, Text } from "@chakra-ui/react";
import styles from "./cta.module.scss";

function CtaSection() {
return (
<>
<Heading
fontFamily="inter"
fontWeight="bold"
size="lg"
textAlign="center"
marginY={6}
>
&gt;Ready to be Part of the Community?
</Heading>
<Text
fontFamily="inter"
paddingX={{ base: 12 }}
paddingBottom={10}
textAlign="center"
color="#667085"
>
Join us in our attempt to make the community a better place.
</Text>
<Center>
<section className={styles.cta}>
{/* <div className={styles.divider}></div> */}
<div className="container-xl">
<h2 className="heading-secondary">
&gt;Ready to be part of the community?
</h2>
<p className={styles.text}>
Join us in our attempt to make the community a better place.
</p>
<SocialButtons />
</Center>
</>
</div>
<div className={styles.divider2}></div>
</section>
);
}

Expand Down
68 changes: 68 additions & 0 deletions src/components/footer/footer.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
.footer {
padding: 10rem 2rem 0;

.sitemap {
display: flex;
justify-content: space-between;
padding-bottom: 6rem;
margin-bottom: 6rem;
border-bottom: 1px solid lightgray;

@media screen and (max-width: 1024px) {
display: block;
}
.nav {
.devsindia {
display: flex;
align-items: center;
font-weight: bold;
margin-bottom: 2rem;
.logo {
border-radius: 50%;
}
}

.links {
.link {
text-decoration: none;
margin-right: 15px;
color: gray;
font-weight: 500;
}
}
}

.signup {
@media screen and (max-width: 1024px) {
margin-top: 2rem;
}
label {
display: block;
margin-bottom: 1rem;
padding-left: 5px;
color: gray;

@media screen and (max-width: 1024px) {
padding-left: 0;
}
}
.input {
padding: 1rem 2rem;
border-radius: 10rem;
font-family: inherit;
border: 1px solid gray;
}
}
}

.copyright {
display: flex;
justify-content: space-between;
padding-bottom: 6rem;
color: gray;

@media screen and (max-width: 1024px) {
display: block;
}
}
}
113 changes: 86 additions & 27 deletions src/components/footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,92 @@
import { Stack, Text } from "@chakra-ui/react";
import Image from "next/image";
import Link from "next/link";

import styles from "./footer.module.scss";
import React, { useState } from "react";

function FooterSection() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the "newsletter" section of the footer area right? Can you add a TODO comment here for future reference? It's easier to lookup for TODO comments across all the files in the source code & fix the issues later on. My justification for doing so is because we need to setup some mailing list service before this function can hook in to it.

Like add a comment on the lines of:

TODO: Setup a Mailchimp account & see if it works.

const [email, setEmail] = useState("");

function handleOnSubmit(e: React.SyntheticEvent) {
e.preventDefault();
console.log(email);
}

function handleOnChange(e: React.FormEvent<HTMLInputElement>) {
setEmail(e.currentTarget.value);
}

return (
<>
<Stack
marginTop={32}
direction={{ base: "column", md: "row" }}
justify="space-between"
align="center"
>
<Text as="small" color="#98A2B3">
&copy; 2022-{new Date().getFullYear()} DevelopersIndia
</Text>
<Text as="small" color="#98A2B3">
Made in India with{" "}
<span>
<a
style={{ textDecoration: "underline" }}
href="https://github.com/developersIndia"
rel="noopener noreferrer"
target="_blank"
>
Open-Source
</a>
</span>{" "}
❤️
</Text>
</Stack>
</>
<footer className={styles.footer}>
<div className="container-xl">
<div className={styles.sitemap}>
<div className={styles.nav}>
<div className={styles.devsindia}>
<Image
src="https://raw.githubusercontent.com/developersIndia/assets/main/logo.svg"
alt="Developers India Logo"
layout="fixed"
width="30px"
className={styles.logo}
height="30px"
/>
&nbsp; Developers India
</div>

<div className={styles.links}>
<Link href="">
<a className={styles.link}>Reddit</a>
</Link>
<Link href="">
<a className={styles.link}>Discord</a>
</Link>
<Link href="">
<a className={styles.link}>Github</a>
</Link>
<Link href="">
<a className={styles.link}>Careers</a>
</Link>
<Link href="">
<a className={styles.link}>About Us</a>
</Link>
</div>
</div>
<div className={styles.signup}>
<form onSubmit={handleOnSubmit}>
<label>Stay up to date</label>
<input
placeholder="Your Email Address"
type="text"
className={styles.input}
onChange={handleOnChange}
></input>

<button type="submit" className="button-dark">
Submit
</button>
</form>
</div>
</div>

<div className={styles.copyright}>
<p>&copy; 2022-{new Date().getFullYear()} Developers India</p>
<p>
Made in India with{" "}
<span>
<a
style={{ textDecoration: "underline", color: "#2A3268" }}
href="https://github.com/developersIndia"
rel="noopener noreferrer"
target="_blank"
>
Open-Source
</a>
</span>{" "}
❤️
</p>
</div>
</div>
</footer>
);
}

Expand Down
Loading