-
Notifications
You must be signed in to change notification settings - Fork 93
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: Abhishek <[email protected]>
- Loading branch information
1 parent
fef656c
commit b89fd04
Showing
1 changed file
with
68 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,80 @@ | ||
| import React, {useState} from "react"; | ||
| import React, { useState } from "react"; | ||
| import Link from "next/link"; | ||
| import {UpIcon} from "./UpIcon" | ||
| import { UpIcon } from "./UpIcon" | ||
| import DownIcon from "./DownIcon" | ||
| import Image from "next/image"; | ||
|
|
||
| export interface NavItemWithSmallDropdownProps { | ||
| heading: string; | ||
| dropdownData: DropdowndataInterface[]; | ||
| } | ||
| heading: string; | ||
| dropdownData: DropdowndataInterface[]; | ||
| } | ||
|
|
||
| export interface DropdowndataInterface{ | ||
| heading:string; | ||
| links:LinkDatainterface[] | ||
| export interface DropdowndataInterface { | ||
| heading: string; | ||
| links: LinkDatainterface[] | ||
| } | ||
| export interface LinkDatainterface { | ||
| pagelink: string; | ||
| pageName: string; | ||
| } | ||
| export default function NavItemWithSmallDropdown({ heading, dropdownData }: NavItemWithSmallDropdownProps) { | ||
| const [openDropdown, setShowDropdown] = useState(false) | ||
| const showDropdown = () => { | ||
| setShowDropdown(true) | ||
| } | ||
| const hideDropdown = () => { | ||
| setShowDropdown(false) | ||
| } | ||
| export interface LinkDatainterface{ | ||
| pagelink:string; | ||
| pageName:string; | ||
| const toggleDropdown = () => { | ||
| setShowDropdown(!openDropdown) | ||
| } | ||
| export default function NavItemWithSmallDropdown({heading,dropdownData}:NavItemWithSmallDropdownProps){ | ||
| const [openDropdown,setShowDropdown] = useState(false) | ||
| const showDropdown = ()=>{ | ||
| setShowDropdown(true) | ||
| } | ||
| const hideDropdown = ()=>{ | ||
| setShowDropdown(false) | ||
| } | ||
| const toggleDropdown =()=>{ | ||
| setShowDropdown(!openDropdown) | ||
| } | ||
|
|
||
| return( | ||
| return ( | ||
| <div | ||
| onMouseEnter={showDropdown} | ||
| onMouseLeave={hideDropdown} | ||
| className="relative flex items-center py-3 transition duration-150 ease-in-out cursor-pointer" | ||
| > | ||
| <div className="flex align-center text-gray-600 hover:text-primary-300"> | ||
| <div className="font-medium mr-2"> | ||
| Resources | ||
| </div> | ||
| <div onClick={toggleDropdown} className="pt-1.5"> | ||
| {openDropdown ? <UpIcon className="text-current" /> : <DownIcon className="text-current" />} | ||
| </div> | ||
| </div> | ||
| {openDropdown && ( | ||
| <div | ||
| onMouseEnter={showDropdown} | ||
| onMouseLeave={hideDropdown} | ||
| className="relative flex items-center py-3 transition duration-150 ease-in-out cursor-pointer" | ||
| > | ||
| <div className="flex align-center text-gray-600 hover:text-primary-300"> | ||
| <div className="font-medium mr-2"> | ||
| Resources | ||
| className="absolute top-full pb-0 bg-[#F5F5F5] pb-8 z-10 border border-gray-300 rounded-lg" | ||
| > <div> | ||
| <div className="flex items-center justify-between"> | ||
| {dropdownData.map((lists) => ( | ||
| <div key={lists.heading}> | ||
| {" "} | ||
| <span className="font-bold text-secondary-300 uppercase px-3 py-3 flex items-center transition duration-150 ease-in-out"> | ||
| {lists.heading} | ||
| </span> | ||
| <ul> | ||
| {lists.links.map((link) => ( | ||
| <li key={link.pageName}> | ||
| {" "} | ||
| {/* Ensure to add a key for list items when mapping */} | ||
| <Link | ||
| target="_blank" | ||
| href={link.pagelink} | ||
| className="font-medium text-gray-600 hover:text-primary-300 px-3 py-3 flex items-center transition duration-150 ease-in-out whitespace-nowrap " | ||
| > | ||
| {link.pageName} | ||
| </Link> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| <div onClick={toggleDropdown} className="pt-1.5"> | ||
| {openDropdown ? <UpIcon className="text-current" /> : <DownIcon className="text-current" />} | ||
| </div></div> | ||
| {openDropdown && ( | ||
| <div | ||
| className="absolute top-full bg-[#eeeded] pb-8 z-10" > | ||
| <div> | ||
| <div className="flex items-center justify-between"> | ||
| {dropdownData.map((lists) => ( | ||
| <div key={lists.heading}> | ||
| {" "} | ||
| <span className="font-bold text-secondary-300 uppercase px-3 py-3 flex items-center transition duration-150 ease-in-out"> | ||
| {lists.heading} | ||
| </span> | ||
| <ul> | ||
| {lists.links.map((link) => ( | ||
| <li key={link.pageName}> | ||
| {" "} | ||
| {/* Ensure to add a key for list items when mapping */} | ||
| <Link | ||
| target="_blank" | ||
| href={link.pagelink} | ||
| className="font-medium text-gray-600 hover:text-primary-300 px-3 py-3 flex items-center transition duration-150 ease-in-out whitespace-nowrap " | ||
| > | ||
| {link.pageName} | ||
| </Link> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| } |