+ + Welcome to Feedback Flow { > Email Password {/* Find a darker color for hover */} Login diff --git a/app/page.tsx b/app/page.tsx deleted file mode 100644 index afabd80..0000000 --- a/app/page.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import NavigationBar from "@/components/NavigationBar"; - -export default function Home() { - return ( - - - Login - - ); -} diff --git a/app/pip/page.tsx b/app/pip/page.tsx new file mode 100644 index 0000000..f5e328e --- /dev/null +++ b/app/pip/page.tsx @@ -0,0 +1,11 @@ +import NavigationBar from "@/components/NavigationBar"; + +const PIP = () => { + return ( + + + + ); +}; + +export default PIP; diff --git a/app/profile/page.tsx b/app/profile/page.tsx new file mode 100644 index 0000000..e2e6aac --- /dev/null +++ b/app/profile/page.tsx @@ -0,0 +1,37 @@ +import NavigationBar from "@/components/NavigationBar"; +import UserProfileButton from "@/components/UserProfileButton"; +import Image from "next/image"; +import JobSVG from "@/public/Job-Profile-Image.svg"; + +const Profile = () => { + const userName = "Adrián Alejandro Ramírez Cruz"; + const userEmail = "adrian_rmzc@gmail.com"; + const userRole = "Software Engineer"; + const userDepartment = "IT Department"; + return ( + + + + + + + {userName} + + {userRole} + - + {userDepartment} + + {userEmail} + + + + + + ); +}; + +export default Profile; diff --git a/components/DashboardIcon.tsx b/components/DashboardIcon.tsx new file mode 100644 index 0000000..e129706 --- /dev/null +++ b/components/DashboardIcon.tsx @@ -0,0 +1,31 @@ +import Link from "next/link"; + +interface DashboardIconInterface { + path: string; + currentPath: string; +} +const DashboardIcon = ({ path, currentPath }: DashboardIconInterface) => { + const isActive = currentPath === path; + return ( + + + + + + ); +}; +export default DashboardIcon; diff --git a/components/NavigationBar.jsx b/components/NavigationBar.jsx deleted file mode 100644 index 45fbdca..0000000 --- a/components/NavigationBar.jsx +++ /dev/null @@ -1,26 +0,0 @@ -"use client"; -import { UserButton } from "@clerk/nextjs"; -import { usePathname } from "next/navigation"; - -const NavigationBar = () => { - const pathname = usePathname(); - - // si estamos en el login o register no mostramos la navbar - if (pathname === "/login" || pathname === "/register") return null; - - return ( - - FEEDBACK FLOW - - - - Login - - - Register - - - - ); -}; -export default NavigationBar; diff --git a/components/NavigationBar.tsx b/components/NavigationBar.tsx new file mode 100644 index 0000000..e45660d --- /dev/null +++ b/components/NavigationBar.tsx @@ -0,0 +1,24 @@ +"use client"; +import { usePathname } from "next/navigation"; +import PIPIcon from "./PIPIcon"; +import DashboardIcon from "./DashboardIcon"; +import UserIcon from "./UserIcon"; +import SearchBar from "./SearchBar"; +import Notifications from "./Notifications"; + +const NavigationBar = () => { + const pathname = usePathname(); + return ( + + FEEDBACK FLOW + + + + + + + + + ); +}; +export default NavigationBar; diff --git a/components/Notifications.tsx b/components/Notifications.tsx new file mode 100644 index 0000000..1bce446 --- /dev/null +++ b/components/Notifications.tsx @@ -0,0 +1,34 @@ +"use client"; + +import { useState } from "react"; + +const Notifications = () => { + const [isActive, setIsActive] = useState(false); + const notificationsCount = 1; + return ( + setIsActive(!isActive)} + className={`${isActive ? "bg-primary" : "bg-white"} group rounded-full p-2 drop-shadow-lg hover:bg-primary`} + > + + + + {notificationsCount > 0 && ( + + )} + + ); +}; + +export default Notifications; diff --git a/components/PIPIcon.tsx b/components/PIPIcon.tsx new file mode 100644 index 0000000..edc507b --- /dev/null +++ b/components/PIPIcon.tsx @@ -0,0 +1,32 @@ +import Link from "next/link"; + +interface PIPIconInterface { + path: string; + currentPath: string; +} +const PIPIcon = ({ path, currentPath }: PIPIconInterface) => { + const isActive = currentPath === path; + return ( + + + + + + ); +}; + +export default PIPIcon; diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx new file mode 100644 index 0000000..3514e9c --- /dev/null +++ b/components/SearchBar.tsx @@ -0,0 +1,33 @@ +interface SearchBarInterface { + placeholder: string; +} + +const SearchBar = ({ placeholder }: SearchBarInterface) => { + return ( + + + + + + + + ); +}; + +export default SearchBar; diff --git a/components/UserIcon.tsx b/components/UserIcon.tsx new file mode 100644 index 0000000..6286d56 --- /dev/null +++ b/components/UserIcon.tsx @@ -0,0 +1,31 @@ +import Link from "next/link"; + +interface UserIconInterface { + path: string; + currentPath: string; +} +const UserIcon = ({ path, currentPath }: UserIconInterface) => { + const isActive = currentPath === path; + return ( + + + + + + ); +}; +export default UserIcon; diff --git a/components/UserProfileButton.tsx b/components/UserProfileButton.tsx new file mode 100644 index 0000000..4a1cb97 --- /dev/null +++ b/components/UserProfileButton.tsx @@ -0,0 +1,54 @@ +import Image from "next/image"; +import Link from "next/link"; + +interface UserProfileButtonProps { + name?: string; + photoUrl?: string; + size?: "sm" | "md" | "lg"; + className?: string; +} + +const UserProfileButton = ({ + name, + photoUrl, + size = "md", + className, +}: UserProfileButtonProps) => { + const sizes = { + sm: "h-10 w-10", + md: "h-20 w-20", + lg: "h-32 w-32", + }; + const isActive = false; + return ( + + {photoUrl ? ( + + ) : ( + + + + )} + + ); +}; +export default UserProfileButton; diff --git a/next.config.mjs b/next.config.mjs index 4678774..9578c64 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,4 +1,15 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + images: { + remotePatterns: [ + { + protocol: "https", // Specify the protocol + hostname: "static.wikia.nocookie.net", // Specify the hostname + // Optionally, you can also specify the pathname prefix if needed: + // pathname: '/your/pathname/prefix/*', + }, + ], + }, +}; export default nextConfig; diff --git a/public/Job-Profile-Image.svg b/public/Job-Profile-Image.svg new file mode 100644 index 0000000..c4d87b7 --- /dev/null +++ b/public/Job-Profile-Image.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/tailwind.config.ts b/tailwind.config.ts index 95ba64b..2395075 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -15,7 +15,7 @@ const config: Config = { dark: "#492aa9", }, secondary: "#4598FB", - white: "#F8F5F5", + bone: "#F8F5F5", }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
Welcome to Feedback Flow
{userName}
{userRole}
-
{userDepartment}
{userEmail}