Skip to content

Commit

Permalink
last add
Browse files Browse the repository at this point in the history
  • Loading branch information
@is-it-ayush
is-it-ayush committed Nov 5, 2022
1 parent 22a8b54 commit 7af196d
Show file tree
Hide file tree
Showing 4 changed files with 367 additions and 0 deletions.
39 changes: 39 additions & 0 deletions app/(landing)/contributors/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import {Contributors} from "../../../components/pages/(landing)/Contributors";
import {Input} from "../../../components/ui/Input";

export default async function ContributorsPage() {

// Fetch all the team members of all the and contributor's from the Github API.
// And do this in the following format;
// DEMO: Currently just fetching the backend team members repo.

const backendRes = await fetch("https://api.github.com/repos/MultiEmail/backend/contributors", {
next: {
revalidate: 60 * 60 * 24,
}
});
let team;

if (backendRes.status === 200) {
let jsonRes = await backendRes.json();
team = jsonRes
.filter((member: any) => member.type === "User")
.map((member: any) => {
return {
name: member.login,
profilePicture: member.avatar_url,
role: "Backend Developer",
github: member.html_url,
};
});
}

const teamMembers: Array<{
name: string;
profilePicture: string;
role: string;
github: string;
}> = [];

return <Contributors team={team} />;
}
106 changes: 106 additions & 0 deletions components/pages/(landing)/Contributors.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
"use client";

// Libraries
import {useState} from "react";
import {AnimatePresence, motion} from "framer-motion";
import {Menu} from "../../ui/Menu";
import {useRouter} from "next/navigation";
import Link from "next/link";

// Components
import {ButtonOrLink} from "../../ui/ButtonOrLink";
import {Card} from "../../ui/Card";

// Icons
import {GoBrowser} from "react-icons/go";
import {CgMenuRight} from "react-icons/cg";
import {FiGithub} from "react-icons/fi";

interface Team {
name: string;
profilePicture: string;
role: string;
github: string;
}

export function Contributors({team}: {team: Array<Team>}) {
const [showDropdown, setShowDropdown] = useState(false);
const router = useRouter();

const menuOptions = [
{
text: "About",
href: "/",
},
{
text: "Github",
href: "/github",
},
{
text: "Contributor's",
href: "/contributors",
},
{
text: "Support",
href: "/support",
},
];

function onMenuClick() {
setShowDropdown(!showDropdown);
}

return (
<main className="flex flex-row font-poppins no-scrollbar p-0 min-h-screen items-center">
<AnimatePresence>
<motion.section
className="flex flex-row overflow-hidden w-full min-h-screen p-10"
initial={{opacity: 0}}
animate={{opacity: 1}}
transition={{duration: 0.5}}>
<div className="flex flex-col w-full">
<div className="flex flex-row text-3xl items-center my-5 justify-between">
<h1 className="flex items-center mb-0 font-bold">Contributor's</h1>
<div
className="flex place-items-center hover:animate-ping-once cursor-pointer transition-all"
onClick={e => {
e.preventDefault();
setShowDropdown(true);
}}>
<ButtonOrLink intent="default" rounded={true}>
<CgMenuRight className="w-[32px] h-[32px] m-2" />
</ButtonOrLink>
</div>
</div>
<div className="flex flex-row flex-wrap justify-center ">
{team ? (
team.map((member, index) => (
<div key={index} className="flex flex-col w-fit p-5 border-2 border-gray-300 m-5">
<div className="flex flex-col">
<img className="w-20 h-20 rounded-full" src={member.profilePicture} />
<h1 className="text-[14px] font-bold">{member.name}</h1>
<h2 className="text-lg mb-2">{member.role}</h2>
<Link href={member.github} target="_blank">
<div className="hover:bg-gray-300 rounded-full p-2 w-fit transition-all duration-200">
<FiGithub className="w-[28px] h-[28px]" />
</div>
</Link>
</div>
</div>
))
) : (
<div>
<h1 className="text-3xl font-bold">There are no contributors yet! :(</h1>
</div>
)}
</div>
</div>

<AnimatePresence>
{showDropdown ? <Menu options={menuOptions} closeMenu={onMenuClick} /> : null}
</AnimatePresence>
</motion.section>
</AnimatePresence>
</main>
);
}
112 changes: 112 additions & 0 deletions components/pages/(landing)/Github.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
"use client";

// Libraries
import {useState} from "react";
import {AnimatePresence, motion} from "framer-motion";
import {Menu} from "../../ui/Menu";
import {useRouter} from "next/navigation";

// Components
import {ButtonOrLink} from "../../ui/ButtonOrLink";

// Icons
import {GoBrowser} from "react-icons/go";
import {CgMenuRight} from "react-icons/cg";
import {Card} from "../../ui/Card";
import {BiExtension, BiServer} from "react-icons/bi";
import Link from "next/link";


export function Github() {
const [showDropdown, setShowDropdown] = useState(false);
const router = useRouter();

const menuOptions = [
{
text: "About",
href: "/",
},
{
text: "Github",
href: "/github",
},
{
text: "Contributor's",
href: "/contributors",
},
{
text: "Support",
href: "/support",
},
];

function onMenuClick() {
setShowDropdown(!showDropdown);
}

return (
<main className="flex flex-row font-poppins no-scrollbar p-0 min-h-screen items-center">
<AnimatePresence>
<motion.section
className="flex flex-row overflow-hidden w-full min-h-screen p-10"
initial={{opacity: 0}}
animate={{opacity: 1}}
transition={{duration: 0.5}}>
<div className="flex flex-col w-full">
<div className="flex flex-row text-3xl items-center my-5 justify-between">
<h1 className="flex items-center mb-0 font-bold">Github</h1>
<div
className="flex place-items-center hover:animate-ping-once cursor-pointer transition-all"
onClick={e => {
e.preventDefault();
setShowDropdown(true);
}}>
<ButtonOrLink intent="default" rounded={true}>
<CgMenuRight className="w-[32px] h-[32px] m-2" />
</ButtonOrLink>
</div>
</div>
<p className="prose">
We are open source and we love it. We are always looking for contributors to help us improve
our projects. If you are interested in contributing to our projects, please read our{" "}
<a href="" className="text-blue-500">
contributing guidelines
</a>
.
</p>
<hr className="my-10" />
<h1 className="flex text-3xl font-bold">Repositories</h1>
<div className="flex flex-col lg:flex-row gap-5 mt-5 justify-center items-center">
<Link className="flex place-items-center w-full" href="https://github.com" target="_blank">
<Card size="small" width="full">
<GoBrowser className="w-[32px] h-[32px] m-2" />
<h4 className="flex text-xl text-center prose font-bold mb-0">Client</h4>
<p className="flex w-full text-sm prose justify-center">The Frontend Repository</p>
</Card>
</Link>
<Link className="flex place-items-center w-full" href="https://github.com" target="_blank">
<Card size="small" width="full">
<BiServer className="w-[32px] h-[32px] m-2" />
<h4 className="flex text-xl text-center prose font-bold mb-0">Server</h4>
<p className="flex w-full text-sm prose justify-center">The Backend Repository</p>
</Card>
</Link>
<Link className="flex place-items-center w-full" href="https://github.com" target="_blank">
<Card size="small" width="full">
<BiExtension className="w-[32px] h-[32px] m-2" />
<h4 className="flex text-xl text-center prose font-bold mb-0">VSCode Extension</h4>
<p className="flex w-full text-sm prose justify-center">
The VSCode Extension Repository
</p>
</Card>
</Link>
</div>
</div>
<AnimatePresence>
{showDropdown ? <Menu options={menuOptions} closeMenu={onMenuClick} /> : null}
</AnimatePresence>
</motion.section>
</AnimatePresence>
</main>
);
}
110 changes: 110 additions & 0 deletions components/pages/(landing)/Support.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
"use client";

// Libraries
import {useState} from "react";
import {AnimatePresence, motion} from "framer-motion";
import {Menu} from "../../ui/Menu";
import {useRouter} from "next/navigation";
import Link from "next/link";

// Components
import {ButtonOrLink} from "../../ui/ButtonOrLink";

// Icons
import {HiOutlineDocumentText} from "react-icons/hi";
import {CgMenuRight} from "react-icons/cg";
import {Card} from "../../ui/Card";
import {MdPassword} from "react-icons/md";

export function Support() {
const [showDropdown, setShowDropdown] = useState(false);
const router = useRouter();

const menuOptions = [
{
text: "About",
href: "/",
},
{
text: "Github",
href: "/github",
},
{
text: "Contributor's",
href: "/contributors",
},
{
text: "Support",
href: "/support",
},
];

function onMenuClick() {
setShowDropdown(!showDropdown);
}

return (
<main className="flex flex-row font-poppins no-scrollbar p-0 min-h-screen items-center">
<AnimatePresence>
<motion.section
className="flex flex-row overflow-hidden w-full min-h-screen p-10"
initial={{opacity: 0}}
animate={{opacity: 1}}
transition={{duration: 0.5}}>
<div className="flex flex-col w-full">
<div className="flex flex-row text-3xl items-center my-5 justify-between">
<h1 className="flex items-center mb-0 font-bold">Support</h1>
<div
className="flex place-items-center hover:animate-ping-once cursor-pointer transition-all"
onClick={e => {
e.preventDefault();
setShowDropdown(true);
}}>
<ButtonOrLink intent="default" rounded={true}>
<CgMenuRight className="w-[32px] h-[32px] m-2" />
</ButtonOrLink>
</div>
</div>
<div className="flex flex-col lg:flex-row w-full h-full justify-center items-center">
<Link className="flex place-items-center w-full" href="/" target="_blank">
<Card size="big" width="full">
<MdPassword className="w-[32px] h-[32px] m-2" />
<div className="flex flex-col">
<h4 className="flex text-xl text-center prose font-bold mb-0">Password?</h4>
<p className="prose">Did you forget your password?</p>
</div>
</Card>
</Link>
<Link className="flex place-items-center w-full" href="/" target="_blank">
<Card size="big" width="full">
<HiOutlineDocumentText className="w-[32px] h-[32px] m-2" />
<div className="flex flex-col">
<h4 className="flex text-xl text-center prose font-bold mb-0">
Documentation?
</h4>
<p className="prose">We wrote a simple guide for you.</p>
</div>
</Card>
</Link>
<Link
className="flex place-items-center w-full"
href="https://discord.gg/GtSftczQX5"
target="_blank">
<Card size="big" width="full">
<MdPassword className="w-[32px] h-[32px] m-2" />
<div className="flex flex-col">
<h4 className="flex text-xl text-center prose font-bold mb-0">Discord</h4>
<p className="prose">Need extra help? We gotchu.</p>
</div>
</Card>
</Link>
</div>
</div>
<AnimatePresence>
{showDropdown ? <Menu options={menuOptions} closeMenu={onMenuClick} /> : null}
</AnimatePresence>
</motion.section>
</AnimatePresence>
</main>
);
}

1 comment on commit 7af196d

@vercel
Copy link

@vercel vercel bot commented on 7af196d Nov 5, 2022

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

memail-ui-playgrnd – ./

memail-ui-playgrnd-git-main-xxentity.vercel.app
memail-ui-playgrnd.vercel.app
memail-ui-playgrnd-xxentity.vercel.app

Please sign in to comment.