Merge pull request #19 from RicardoGEsteves/create-layouts

feat: ✨ Type: Enhancement | Title: Addition of new components and layouts

app/(main)/layout.tsx

@@ -2,6 +2,9 @@
 
 import { usePathname } from "next/navigation";
 
+import TopNav from "../_components/top-nav";
+import SideNav from "../_components/side-nav";
+
 export default function MainLayout({
   children,
 }: {
@@ -11,13 +14,13 @@ export default function MainLayout({
 
   return (
     <>
-      {/* TopNav */}
+      <TopNav />
       <div
         className={`flex justify-between mx-auto w-full lg:px-2.5 px-0 ${
           pathname == "/" ? "max-w-[1140px]" : ""
         }`}
       >
-        {/* SideNav */}
+        <SideNav />
         {children}
       </div>
     </>

app/_components/menu-item.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { AiOutlineHome } from "react-icons/ai";
+import { RiGroupLine } from "react-icons/ri";
+import { BsCameraVideo } from "react-icons/bs";
+
+import { MenuItemTypes } from "@/types/layout";
+
+export default function MenuItem({
+  iconString,
+  colorString,
+  sizeString,
+}: MenuItemTypes) {
+  const icons = () => {
+    if (iconString == "For You")
+      return (
+        <AiOutlineHome
+          size={sizeString}
+          color={colorString}
+        />
+      );
+    if (iconString == "Following")
+      return (
+        <RiGroupLine
+          size={sizeString}
+          color={colorString}
+        />
+      );
+    if (iconString == "LIVE")
+      return (
+        <BsCameraVideo
+          size={sizeString}
+          color={colorString}
+        />
+      );
+  };
+
+  return (
+    <>
+      <div className="w-full flex items-center hover:bg-gray-100 p-2.5 rounded-md">
+        <div className="flex items-center lg:mx-0 mx-auto">
+          {icons()}
+
+          <p
+            className={`lg:block hidden pl-[9px] mt-0.5 font-semibold text-[17px] text-[${colorString}]`}
+          >
+            {iconString}
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}

app/_components/side-nav.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import MenuItem from "./menu-item";
+
+export default function SideNav() {
+  const pathname = usePathname();
+
+  return (
+    <div
+      id="SideNav"
+      className={`
+      fixed z-20 bg-white pt-[70px] h-full lg:border-r-0 border-r w-[75px] overflow-auto
+      ${pathname === "/" ? "lg:w-[310px]" : "lg:w-[220px]"}
+  `}
+    >
+      <div className="lg:w-full w-[55px] mx-auto">
+        <Link href="/">
+          <MenuItem
+            iconString="For You"
+            colorString={pathname == "/" ? "#84cc16" : ""}
+            sizeString="25"
+          />
+        </Link>
+      </div>
+    </div>
+  );
+}

app/_components/top-nav.tsx

@@ -0,0 +1,144 @@
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { BiSearch, BiUser } from "react-icons/bi";
+import { AiOutlinePlus } from "react-icons/ai";
+import { BsThreeDotsVertical } from "react-icons/bs";
+import { FiLogOut } from "react-icons/fi";
+
+export default function TopNav() {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const handleSearch = (event: { target: { value: string } }) => {
+    const { value } = event.target;
+    console.log(value);
+  };
+
+  const goTo = () => {
+    console.log("goTo");
+  };
+
+  return (
+    <nav
+      id="TopNav"
+      className="fixed bg-white z-30 flex items-center w-full border-b h-[60px]"
+    >
+      <div
+        className={`flex items-center justify-between gap-6 w-full px-4 mx-auto ${
+          pathname === "/" ? "max-w-[1150px]" : ""
+        }`}
+      >
+        <Link href="/">
+          <Image
+            src="/logo.png"
+            alt="Storyscape logo"
+            width={60}
+            height={60}
+          />
+        </Link>
+
+        <div className="relative hidden md:flex items-center justify-end bg-[#F1F1F2] p-1 rounded-full max-w-[430px] w-full">
+          <input
+            type="text"
+            onChange={handleSearch}
+            className="w-full pl-3 my-2 bg-transparent placeholder-[#838383] text-[15px] focus:outline-none"
+            placeholder="Search accounts"
+          />
+
+          <div className="absolute bg-white max-w-[910px] h-auto w-full z-20 left-0 top-12 border p-1">
+            <div className="p-1">
+              <Link
+                href={`/profile/id`}
+                className="flex items-center justify-between w-full cursor-pointer hover:bg-lime-500 p-1 px-2 hover:text-neutral-950"
+              >
+                <div className="flex items-center">
+                  <Image
+                    className="rounded-md"
+                    width={40}
+                    height={40}
+                    src="https://placehold.co/40"
+                    alt="Profile picture"
+                  />
+                  <div className="truncate ml-2">Profile name</div>
+                </div>
+              </Link>
+            </div>
+          </div>
+
+          <div className="px-3 py-1 flex items-center border-l border-l-gray-300">
+            <BiSearch
+              color="#A1A2A7"
+              size="22"
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 ">
+          <button
+            onClick={() => goTo()}
+            className="flex items-center border rounded-sm py-[6px] hover:bg-gray-100 pl-1.5"
+          >
+            <AiOutlinePlus
+              color="#000000"
+              size="22"
+            />
+            <span className="px-2 font-medium text-[15px]">Upload</span>
+          </button>
+
+          {true ? (
+            <div className="flex items-center">
+              <button
+                onClick={() => {}}
+                className="flex items-center bg-lime-500 text-neutral-950 border rounded-md px-3 py-[6px]"
+              >
+                <span className="whitespace-nowrap mx-4 font-medium text-[15px]">
+                  Log in
+                </span>
+              </button>
+              <BsThreeDotsVertical
+                color="#161724"
+                size="25"
+              />
+            </div>
+          ) : (
+            <div className="flex items-center">
+              <div className="relative">
+                <button
+                  onClick={() => {}}
+                  className="mt-1 border border-gray-200 rounded-full"
+                >
+                  <Image
+                    className="rounded-full"
+                    src="https://placehold.co/35"
+                    alt="Profile picture"
+                    width={35}
+                    height={35}
+                  />
+                </button>
+
+                <div className="absolute bg-white rounded-lg py-1.5 w-[200px] shadow-xl border top-[40px] right-0">
+                  <button
+                    onClick={() => {}}
+                    className="flex items-center w-full justify-start py-3 px-2 hover:bg-gray-100 cursor-pointer"
+                  >
+                    <BiUser size="20" />
+                    <span className="pl-2 font-semibold text-sm">Profile</span>
+                  </button>
+
+                  <button
+                    onClick={() => {}}
+                    className="flex items-center justify-start w-full py-3 px-1.5 hover:bg-gray-100 border-t cursor-pointer"
+                  >
+                    <FiLogOut size={20} />
+                    <span className="pl-2 font-semibold text-sm">Log out</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}

app/upload/layout.tsx

@@ -0,0 +1,16 @@
+import TopNav from "../_components/top-nav";
+
+export default function UploadLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="bg-[#F8F8F8] h-[100vh]">
+      <TopNav />
+      <div className="flex justify-between mx-auto w-full px-2 max-w-[1140px]">
+        {children}
+      </div>
+    </div>
+  );
+}

components/client-only.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+export default function ClientOnly({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return isClient ? <>{children}</> : null;
+}

next.config.js

@@ -8,6 +8,17 @@ const nextConfig = {
     if (!isServer) config.externals.push("canvas");
     return config;
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "placehold.co",
+      },
+    ],
+    dangerouslyAllowSVG: true,
+    contentDispositionType: "attachment",
+    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+  },
 };
 
 module.exports = nextConfig;

types/component.ts

@@ -0,0 +1,43 @@
+import { CommentWithProfile, Post, PostWithProfile } from "./types";
+
+export interface CommentsHeaderCompTypes {
+  params: { userId: string; postId: string };
+  post: PostWithProfile;
+}
+
+export interface CommentsCompTypes {
+  params: { userId: string; postId: string };
+}
+
+export interface PostPageTypes {
+  params: { userId: string; postId: string };
+}
+
+export interface ProfilePageTypes {
+  params: { id: string };
+}
+
+export interface SingleCommentCompTypes {
+  params: { userId: string; postId: string };
+  comment: CommentWithProfile;
+}
+
+export interface PostUserCompTypes {
+  post: Post;
+}
+
+export interface PostMainCompTypes {
+  post: PostWithProfile;
+}
+
+export interface PostMainLikesCompTypes {
+  post: PostWithProfile;
+}
+
+export interface TextInputCompTypes {
+  string: string;
+  inputType: string;
+  placeholder: string;
+  onUpdate: (newValue: string) => void;
+  error: string;
+}

types/layout.ts

@@ -0,0 +1,11 @@
+import { RandomUsers } from "./types";
+
+export interface MenuItemTypes {
+  iconString: string;
+  colorString: string;
+  sizeString: string;
+}
+
+export interface MenuItemFollowCompTypes {
+  user: RandomUsers;
+}