Skip to content

Commit

Permalink
removed unused input
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jemiiah
Jemiiah committed Mar 4, 2025
1 parent 4211a88 commit 3fd5c97
Show file tree
Hide file tree
Showing 3 changed files with 190 additions and 176 deletions.
108 changes: 54 additions & 54 deletions src/app/exam/components/ExamFeedNavbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
'use client';
import Logo from '@/public/skillnet-white logo.png';
import Avatar from '@/public/img/profile-avatar.png';
import Image from 'next/image';
import Link from 'next/link';
import { Bell, Search, MoreVertical, X, Menu, MessageCircle } from 'lucide-react';
import { usePathname } from 'next/navigation';
import { Fragment, useEffect, useRef, useState } from 'react';
import { ExamNavLinkProps } from '@/interfaces/exam.interface';
import { navLinks } from './mockData';
import { useChatbot } from './ChatbotContext';
import { ChatBot } from './ChatBox';
"use client";
import Logo from "@/public/skillnet-white logo.png";
import Avatar from "@/public/img/profile-avatar.png";
import Image from "next/image";
import Link from "next/link";
import { Bell, Search, MoreVertical, X, Menu } from "lucide-react";
import { usePathname } from "next/navigation";
import { Fragment, useEffect, useRef, useState } from "react";
import { ExamNavLinkProps } from "@/interfaces/exam.interface";
import { navLinks } from "./mockData";
import { ChatBot } from "./ChatBox";

const ExamFeedNavbar = () => {
const pathname = usePathname();
const [showSearch, setShowSearch] = useState(false);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const menuRef = useRef<HTMLDivElement>(null);
const { toggleChatbot } = useChatbot();

const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
Expand All @@ -31,65 +29,66 @@ const ExamFeedNavbar = () => {
}
};

document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);

return (
<>
<nav className='w-full flex justify-between items-center px-4 sm:px-8 lg:px-16 py-[22px] bg-[#101110] text-sm leading-6 text-[#FCFCFC] fixed top-0 left-0 z-50'>
<nav className="w-full flex justify-between items-center px-4 sm:px-8 lg:px-16 py-[22px] bg-[#101110] text-sm leading-6 text-[#FCFCFC] fixed top-0 left-0 z-50">
{/* Logo */}
<Link href='/' className='flex items-center cursor-pointer'>
<Link href="/" className="flex items-center cursor-pointer">
<Image
className='w-[50px] h-[30px] mobile:w-[80px] mobile:h-[40px]'
className="w-[50px] h-[30px] mobile:w-[80px] mobile:h-[40px]"
src={Logo}
alt='Logo'
alt="Logo"
/>
</Link>

<div className='hidden md:flex flex-1 items-center w-full justify-between'>
<div className="hidden md:flex flex-1 items-center w-full justify-between">
{/* Navigation Links */}
<ul className='flex justify-center items-center gap-4 mx-auto'>
<ul className="flex justify-center items-center gap-4 mx-auto">
{navLinks.map((link: ExamNavLinkProps, index) => {
const isActive = pathname === link.href;
return (
<Fragment key={link.href}>
<Link href={link.href}>
<span
className={`relative cursor-pointer pb-1 group ${isActive ? 'text-white' : 'text-[#ABABAB]'
}`}
className={`relative cursor-pointer pb-1 group ${
isActive ? "text-white" : "text-[#ABABAB]"
}`}
>
{link.label}
</span>
</Link>
{index < navLinks.length - 1 && (
<li className='bg-[#1D1D1C] w-[3px] h-4 rounded-lg' />
<li className="bg-[#1D1D1C] w-[3px] h-4 rounded-lg" />
)}
</Fragment>
);
})}
</ul>

<div className='flex items-center gap-2 lgTablet:mx-auto'>
<button className='p-2 hover:bg-[#313130] rounded-full transition-colors'>
<div className="flex items-center gap-2 lgTablet:mx-auto">
<button className="p-2 hover:bg-[#313130] rounded-full transition-colors">
<Bell size={20} />
</button>

{/* Search Bar - Show full bar on large screens, icon on smaller */}
<div className='relative'>
<div className='hidden lgTablet:block'>
<div className="relative">
<div className="hidden lgTablet:block">
<Search
className='absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400'
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
size={16}
/>
<input
type='text'
placeholder='Search...'
className='pl-9 pr-3 py-1.5 w-[280px] rounded-lg bg-transparent border border-[#696969] focus:outline-none focus:ring-1 focus:ring-[#313130]'
type="text"
placeholder="Search..."
className="pl-9 pr-3 py-1.5 w-[280px] rounded-lg bg-transparent border border-[#696969] focus:outline-none focus:ring-1 focus:ring-[#313130]"
/>
</div>
<button
className='lgTablet:hidden p-2 hover:bg-[#313130] rounded-full transition-colors'
className="lgTablet:hidden p-2 hover:bg-[#313130] rounded-full transition-colors"
onClick={() => setShowSearch(!showSearch)}
>
<Search size={20} />
Expand All @@ -98,31 +97,31 @@ const ExamFeedNavbar = () => {
</div>
</div>

<div className='flex items-center gap-2'>
<div className="flex items-center gap-2">
{/* User Profile */}

<div className='flex items-center'>
<div className='flex items-center gap-1 mobile:gap-2 bg-[#161716] py-1 mobile:py-2 px-3 rounded-lg'>
<div className="flex items-center">
<div className="flex items-center gap-1 mobile:gap-2 bg-[#161716] py-1 mobile:py-2 px-3 rounded-lg">
<Image
className='w-8 h-8 rounded-full'
className="w-8 h-8 rounded-full"
src={Avatar}
alt='User Avatar'
alt="User Avatar"
width={32}
height={32}
/>
<span className='hidden mobile:block text-white'>
<span className="hidden mobile:block text-white">
osatuyipikin.brawos.eth
</span>
<button className='p-1 hover:bg-[#313130] rounded-full transition-colors'>
<button className="p-1 hover:bg-[#313130] rounded-full transition-colors">
<MoreVertical size={16} />
</button>
</div>
</div>

<button
onClick={toggleMenu}
className='md:hidden flex p-2 rounded-lg hover:bg-[#313130] transition-colors'
aria-label='Toggle menu'
className="md:hidden flex p-2 rounded-lg hover:bg-[#313130] transition-colors"
aria-label="Toggle menu"
>
{isMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
Expand All @@ -131,20 +130,21 @@ const ExamFeedNavbar = () => {
{isMenuOpen && (
<div
ref={menuRef}
className='absolute top-full right-4 mt-1 w-64 z-50 rounded-lg bg-[#101110] border border-[#313130] shadow-lg md:hidden'
className="absolute top-full right-4 mt-1 w-64 z-50 rounded-lg bg-[#101110] border border-[#313130] shadow-lg md:hidden"
>
<div className='px-6 py-4 border-b border-[#313130]'>
<h3 className='text-sm font-semibold text-white'>SELECT PAGE</h3>
<div className="px-6 py-4 border-b border-[#313130]">
<h3 className="text-sm font-semibold text-white">SELECT PAGE</h3>
</div>
<div className='py-2'>
<div className="py-2">
{navLinks.map((link) => {
const isActive = pathname === link.href;
return (
<Link
key={link.href}
href={link.href}
className={`flex items-center px-6 py-3 hover:bg-[#313130] transition-colors text-sm ${isActive ? 'text-white' : 'text-[#ABABAB]'
}`}
className={`flex items-center px-6 py-3 hover:bg-[#313130] transition-colors text-sm ${
isActive ? "text-white" : "text-[#ABABAB]"
}`}
onClick={() => setIsMenuOpen(false)}
>
{link.label}
Expand All @@ -159,16 +159,16 @@ const ExamFeedNavbar = () => {

{/* Floating Search Bar */}
{showSearch && (
<div className='fixed top-[80px] left-0 w-full px-4 sm:px-8 lg:px-16 z-50 lgTablet:hidden'>
<div className='relative w-full bg-[#101110] rounded-lg shadow-lg p-4'>
<div className="fixed top-[80px] left-0 w-full px-4 sm:px-8 lg:px-16 z-50 lgTablet:hidden">
<div className="relative w-full bg-[#101110] rounded-lg shadow-lg p-4">
<Search
className='absolute left-7 top-1/2 transform -translate-y-1/2 text-gray-400'
className="absolute left-7 top-1/2 transform -translate-y-1/2 text-gray-400"
size={16}
/>
<input
type='text'
placeholder='Search...'
className='pl-9 pr-3 py-1.5 w-full rounded-lg bg-transparent border border-[#696969] focus:outline-none focus:ring-1 focus:ring-[#313130]'
type="text"
placeholder="Search..."
className="pl-9 pr-3 py-1.5 w-full rounded-lg bg-transparent border border-[#696969] focus:outline-none focus:ring-1 focus:ring-[#313130]"
autoFocus
/>
</div>
Expand Down
38 changes: 18 additions & 20 deletions src/app/exam/components/ExamFeedPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,50 @@
'use client';
"use client";

import Image from 'next/image';
import examImage from '@/public/img/exam-paper.jpg';
import { examCategories, examMockData } from './mockData';
import { MessageCircle } from 'lucide-react';
import { ExamCard } from './ExamCard';
import { ChatBot } from './ChatBox';
import Image from "next/image";
import examImage from "@/public/img/exam-paper.jpg";
import { examCategories, examMockData } from "./mockData";
import { ExamCard } from "./ExamCard";
import { ChatBot } from "./ChatBox";

const ExamFeedPage = () => {

return (
<main className='min-h-screen bg-[#101110] pt-24 px-4 sm:px-6 lg:px-[100px]'>
<main className="min-h-screen bg-[#101110] pt-24 px-4 sm:px-6 lg:px-[100px]">
{/* Hero Section */}
<div className='w-full h-[220px] relative rounded-lg overflow-hidden'>
<div className="w-full h-[220px] relative rounded-lg overflow-hidden">
<Image
src={examImage}
alt='Examinations background'
alt="Examinations background"
fill
className='object-cover'
className="object-cover"
priority
/>
<div className='absolute inset-0' />
<div className='relative h-full flex items-end px-2 sm:px-4 lg:px-16 pb-8'>
<h1 className='text-3xl sm:text-4xl font-semibold text-white'>
<div className="absolute inset-0" />
<div className="relative h-full flex items-end px-2 sm:px-4 lg:px-16 pb-8">
<h1 className="text-3xl sm:text-4xl font-semibold text-white">
Ongoing examinations
</h1>
</div>
</div>

<div className='my-14 flex justify-end items-center text-white'>
<div className="my-14 flex justify-end items-center text-white">
<ChatBot />
</div>

{/* Categories Section */}
<div className='flex space-x-4 overflow-x-auto pb-4 scrollbar-hide'>
<div className="flex space-x-4 overflow-x-auto pb-4 scrollbar-hide">
{examCategories.map((category) => (
<button
key={category}
className='flex-shrink-0 flex flex-col items-start justify-center border border-[#222220] px-6 py-2 bg-[#101110] text-[#FCFCFC] rounded-lg whitespace-nowrap hover:bg-[#313130] transition-colors'
className="flex-shrink-0 flex flex-col items-start justify-center border border-[#222220] px-6 py-2 bg-[#101110] text-[#FCFCFC] rounded-lg whitespace-nowrap hover:bg-[#313130] transition-colors"
>
{category}
<span className='text-xs text-[#898783]'>6 ongoing exams</span>
<span className="text-xs text-[#898783]">6 ongoing exams</span>
</button>
))}
</div>

{/* Exams Section */}
<div className=' py-8 grid grid-cols-1 md:grid-cols-2 gap-6'>
<div className=" py-8 grid grid-cols-1 md:grid-cols-2 gap-6">
{examMockData.map((exam, index) => (
<ExamCard key={index} exam={exam} />
))}
Expand Down
Loading

0 comments on commit 3fd5c97

Please sign in to comment.