-
Board
-
{params.id}
+
+
+ {columns.map(({ id, title, tasks }) => (
+
+ {tasks.map(({ description, subtasks }, index) => (
+
+ ))}
+
+ ))}
+
);
}
+
+const EmptyBoard = () => {
+ return (
+
+
+
+ This board is empty. Create a new column to get started.
+
+
+
+ );
+};
diff --git a/src/app/(authenticated)/layout.tsx b/src/app/(authenticated)/layout.tsx
new file mode 100644
index 0000000..83affaa
--- /dev/null
+++ b/src/app/(authenticated)/layout.tsx
@@ -0,0 +1,22 @@
+import { Header } from "@/components/Layout/Header";
+import { Sidebar } from "@/components/Layout/Sidebar";
+
+export const metadata = {
+ title: "Boards",
+ description: "Developed by Getting Better ORG",
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+ );
+}
diff --git a/src/app/(landing-page)/page.tsx b/src/app/(landing-page)/page.tsx
new file mode 100644
index 0000000..8f38929
--- /dev/null
+++ b/src/app/(landing-page)/page.tsx
@@ -0,0 +1,16 @@
+import Link from "next/link";
+
+export default function Landing() {
+ return (
+
+ Landing Page
+
+
+ Login
+
+
+ );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ef09ce9..0c8ca38 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,13 @@
import "./globals.css";
+import { Plus_Jakarta_Sans } from "next/font/google";
+
+const jakarta = Plus_Jakarta_Sans({
+ weight: ["400", "500", "700"],
+ subsets: ["latin"],
+ variable: "--font-jakarta",
+});
+
export const metadata = {
title: "Kanban",
description: "Developed by Getting Better ORG",
@@ -12,7 +20,11 @@ export default function RootLayout({
}) {
return (
- {children}
+
+ {children}
+
);
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8f38929..aa0b759 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,16 +1 @@
-import Link from "next/link";
-
-export default function Landing() {
- return (
-
- Landing Page
-
-
- Login
-
-
- );
-}
+export { default } from "./(landing-page)/page";
diff --git a/src/components/Layout/Board/Column.tsx b/src/components/Layout/Board/Column.tsx
new file mode 100644
index 0000000..ee2e1af
--- /dev/null
+++ b/src/components/Layout/Board/Column.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export const Column = ({
+ title,
+ tasksLength,
+ children,
+}: {
+ title: string;
+ tasksLength: number;
+ children: React.ReactNode;
+}) => {
+ return (
+
+
+ {title} ({tasksLength})
+
+
+ {children}
+
+ );
+};
diff --git a/src/components/Layout/Board/Task.tsx b/src/components/Layout/Board/Task.tsx
new file mode 100644
index 0000000..7d3566f
--- /dev/null
+++ b/src/components/Layout/Board/Task.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { TaskComponent } from "./types";
+
+export const Task = ({ description, subtasks }: TaskComponent) => {
+ return (
+
+
+ {description}
+
+
+ 0 of {subtasks} subtasks
+
+
+ );
+};
diff --git a/src/components/Layout/Board/types.d.ts b/src/components/Layout/Board/types.d.ts
new file mode 100644
index 0000000..03eb557
--- /dev/null
+++ b/src/components/Layout/Board/types.d.ts
@@ -0,0 +1,4 @@
+export interface TaskComponent {
+ description: string;
+ subtasks: number;
+}
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
new file mode 100644
index 0000000..a0aee73
--- /dev/null
+++ b/src/components/Layout/Header.tsx
@@ -0,0 +1,46 @@
+"use client";
+import React, { ReactNode } from "react";
+
+import { useSidebarStore } from "@/store/useSidebarStore";
+import { motion, TargetAndTransition } from "framer-motion";
+
+import { Logo } from "./Logo";
+
+const animations: TargetAndTransition = {
+ opacity: [0, 1],
+ transition: {
+ delay: 0.3,
+ type: "spring",
+ bounce: 0,
+ },
+};
+
+export const Header = () => {
+ const openSidebar = useSidebarStore(({ openSidebar }) => openSidebar);
+
+ const Title = ({ children }: { children: ReactNode }) => {
+ const className = "text-2xl font-bold ml-6 cursor-default";
+ return !openSidebar ? (
+
+ {children}
+
+ ) : (
+
{children}
+ );
+ };
+
+ return (
+
+ {!openSidebar && (
+
+
+
+ )}
+
+ Plataform Launch
+
+ );
+};
diff --git a/src/components/Layout/Logo.tsx b/src/components/Layout/Logo.tsx
new file mode 100644
index 0000000..6279b44
--- /dev/null
+++ b/src/components/Layout/Logo.tsx
@@ -0,0 +1,9 @@
+import KanbanLogo from "../../../public/logo.svg";
+
+export const Logo = () => {
+ return (
+
+
+
+ );
+};
diff --git a/src/components/Layout/Sidebar/OpenSidebar.tsx b/src/components/Layout/Sidebar/OpenSidebar.tsx
new file mode 100644
index 0000000..1a8b831
--- /dev/null
+++ b/src/components/Layout/Sidebar/OpenSidebar.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useSidebarStore } from "@/store/useSidebarStore";
+import { EyeIcon } from "@heroicons/react/24/solid";
+import { motion, TargetAndTransition, Variants } from "framer-motion";
+
+const animations: {
+ container: Variants;
+ openSidebar: TargetAndTransition;
+} = {
+ container: {
+ visible: {
+ x: 0,
+ opacity: 1,
+
+ transition: {
+ delay: 0.6,
+ type: "spring",
+ bounce: 0,
+ },
+ },
+ hidden: {
+ x: -100,
+ opacity: 0,
+ },
+ },
+
+ openSidebar: {
+ borderTopRightRadius: ["5%", "50%"],
+ borderBottomRightRadius: ["5%", "50%"],
+
+ transition: {
+ duration: 0.3,
+ bounce: 0,
+ delay: 1,
+ },
+ },
+};
+
+export const OpenSidebar = () => {
+ const [openSidebar, setOpenSidebar] = useSidebarStore(
+ ({ openSidebar, setOpenSidebar }) => [openSidebar, setOpenSidebar]
+ );
+
+ return (
+
+ setOpenSidebar(!openSidebar)}
+ className="bg-theme-purple-200 absolute bottom-6 left-0 p-4 pr-5 pl-7 cursor-pointer"
+ >
+
+
+
+ );
+};
diff --git a/src/components/Layout/Sidebar/SidebarItem.tsx b/src/components/Layout/Sidebar/SidebarItem.tsx
new file mode 100644
index 0000000..9d23f16
--- /dev/null
+++ b/src/components/Layout/Sidebar/SidebarItem.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+import { motion, Variants } from "framer-motion";
+
+export const SidebarItem = ({
+ children,
+ variants,
+ className = "",
+}: {
+ children: React.ReactNode;
+ variants?: Variants;
+ className?: string;
+}) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
new file mode 100644
index 0000000..df8c385
--- /dev/null
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { Fragment } from "react";
+
+import { useSidebarStore } from "@/store/useSidebarStore";
+import { EyeSlashIcon } from "@heroicons/react/24/solid";
+import { AnimatePresence, motion, Variants } from "framer-motion";
+
+import BoardIcon from "../../../../public/icons/board.svg";
+import { Logo } from "../Logo";
+import { OpenSidebar } from "./OpenSidebar";
+import { SidebarItem } from "./SidebarItem";
+
+const animations: {
+ [key: string]: Variants;
+} = {
+ default: {
+ visible: {
+ opacity: 1,
+ },
+
+ hidden: {
+ opacity: 0,
+ transition: {
+ duration: 0.1,
+ },
+ },
+ },
+
+ nav: {
+ visible: {
+ width: 320,
+ borderRight: "2px solid #3E3F4E",
+
+ transition: {
+ type: "spring",
+ bounce: 0,
+ delayChildren: 0.3,
+ staggerChildren: 0.05,
+ },
+ },
+
+ hidden: {
+ width: 0,
+ borderRight: "0px solid #2B2C37",
+
+ transition: {
+ type: "spring",
+ when: "afterChildren",
+ bounce: 0,
+ },
+ },
+ },
+
+ items: {
+ visible: {
+ opacity: 1,
+ y: 0,
+ transition: {
+ type: "spring",
+ stiffness: 300,
+ damping: 24,
+ },
+ },
+
+ hidden: {
+ opacity: 0,
+ y: 20,
+ transition: {
+ duration: 0.1,
+ },
+ },
+ },
+};
+
+export const Sidebar = () => {
+ const [openSidebar, setOpenSidebar] = useSidebarStore(
+ ({ openSidebar, setOpenSidebar }) => [openSidebar, setOpenSidebar]
+ );
+
+ return (
+
+
+ {openSidebar && (
+
+
+
+
+
+
+
+ All Boards (1)
+
+
+
+ Platform Launch
+
+
+
+ Marketing Plan
+
+
+
+ Roadmap
+
+
+
+ + Create New Board
+
+
+ setOpenSidebar(!openSidebar)}
+ className="mt-auto flex items-center gap-2 text-theme-grey-900 cursor-pointer transition-colors rounded-r-sm w-full pl-8 group hover:text-white hover:bg-theme-purple-200 py-4 px-8"
+ >
+
+ Hide Sidebar
+
+
+
+ )}
+
+
+ {!openSidebar && }
+
+ );
+};
diff --git a/src/store/useSidebarStore.ts b/src/store/useSidebarStore.ts
new file mode 100644
index 0000000..a11b869
--- /dev/null
+++ b/src/store/useSidebarStore.ts
@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface SidebarStore {
+ openSidebar: boolean;
+ setOpenSidebar: (isSidebarOpen: boolean) => void;
+}
+
+export const useSidebarStore = create
((set) => ({
+ openSidebar: false,
+ setOpenSidebar: (openSidebar) => set({ openSidebar }),
+}));
diff --git a/tailwind.config.js b/tailwind.config.js
index 8bc20d3..05c62d5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,34 @@ module.exports = {
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
- extend: {},
+ extend: {
+ colors: {
+ theme: {
+ purple: {
+ 100: "#A8A4FF",
+ 200: "#635FC7",
+ },
+ dark: {
+ 500: "#3E3F4E",
+ 700: "#2B2C37",
+ 800: "#20212C",
+ 900: "#000112",
+ },
+ grey: {
+ 50: "#F4F7FD",
+ 200: "#E4EBFA",
+ 900: "#828FA3",
+ },
+ red: {
+ 700: "#FF9898",
+ 900: "#EA5555",
+ },
+ },
+ },
+ fontFamily: {
+ sans: ["var(--font-jakarta)"],
+ },
+ },
},
plugins: [],
};