forked from c4dr-me/ncrtces-website
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0df1353
commit 6597ba6
Showing
2 changed files
with
105 additions
and
124 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
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,132 +1,113 @@ | ||
| import React, { useState } from 'react'; | ||
| // import './Comingsoon.css'; // Import the CSS file | ||
| import './style.css' | ||
| import './style.css'; | ||
|
|
||
| const Tracks = () => { | ||
| const[drop,setDrop] = useState(false); | ||
| const[sec,setSec] = useState(false); | ||
| const [activeTrack, setActiveTrack] = useState(null); | ||
|
|
||
| // Function to toggle the dropdown menu | ||
| function toggleDropdown(id) { | ||
| // const dropdown = document.getElementById(id); | ||
| const allDropdowns = document.querySelectorAll('.dropdown-menu'); | ||
| allDropdowns.forEach((item) => { | ||
| if (item.id !== id) { | ||
| setDrop(true); | ||
| } | ||
| setSec(sec=>!sec); | ||
| // dropdown.classList.toggle('hidden'); | ||
| }); | ||
| } | ||
| let toggleCheck = drop ?' hidden':null; | ||
| let toggleCheck2 = sec?' hidden':null; | ||
| // const track12 = document.getElementById('track1'); | ||
| // track12.classList.remove('hidden'); | ||
| const toggleDropdown = (id) => { | ||
| setActiveTrack((prevActiveTrack) => (prevActiveTrack === id ? null : id)); | ||
| }; | ||
|
|
||
| return ( | ||
| <section id="track" className="tracks-section section"> | ||
| <div className="w-full" > | ||
| <div className=' bg-white pt-12 md:px-[10%]'> | ||
| <div className='pt-16'> | ||
| <h1 className='text-[#c00000] text-center text-3xl font-[600]'>TRACKS</h1> | ||
| <div className='w-[100px] h-[2px] mx-auto mt-2 bg-[#365372] rounded-xl mb-8'></div> | ||
| </div> | ||
| <div className="mx-auto md:ml-0 w-[90%] md:w-[300px]"> | ||
| <ul className="space-y-2"> | ||
| <li className="relative"> | ||
| <button type="button" | ||
| className={`hover:text-white focus:text-white w-full bg-gray-200 text-left pl-3 py-2 rounded-md font-medium hover:bg-gray-500 focus:outline-none focus:bg-gray-500${toggleCheck2}`} | ||
| onClick={toggleDropdown('track1')} | ||
| > | ||
| Track I: Climate Change | ||
| </button> | ||
| <ul id="track1" | ||
| className={`md:absolute left-full top-0 mt-2 mx-auto md:ml-2 w-[100%] md:w-[800px] bg-white rounded-md shadow-lg hidden text-left dropdown-menu open${toggleCheck}`}> | ||
| <li className="px-3 py-1">● Climate Change and Health</li> | ||
| <li className="px-3 py-1">● Global Warming</li> | ||
| <li className="px-3 py-1">● Climate change: modelling, measurements, and predictions</li> | ||
| <li className="px-3 py-1">● Change economics, law and policy</li> | ||
| <li className="px-3 py-1">● Climate change, Green initiatives and products</li> | ||
| <li className="px-3 py-1">● Natural resources and Biodiversity in a warming world</li> | ||
| <li className="px-3 py-1">● Impacts, Hazards, risks, and effective adaptation to climate change</li> | ||
| </ul> | ||
| </li> | ||
|
|
||
| <li className="relative"> | ||
| <button type="button" | ||
| className={`hover:text-white focus:text-white w-full bg-gray-200 text-left pl-3 py-2 rounded-md font-medium hover:bg-gray-500 focus:outline-none focus:bg-gray-500${toggleCheck2}`} | ||
| onClick={toggleDropdown('track2')} | ||
| > | ||
| Track II: Energy | ||
| </button> | ||
| <ul id="track2" | ||
| className={`md:absolute left-full top-0 mt-2 ml-2 w-[400px] md:w-[800px] bg-white rounded-md shadow-lg hidden text-left dropdown-menu open${toggleCheck}`}> | ||
| <li className="px-3 py-1">● Energy Economics</li> | ||
| <li className="px-3 py-1">● Energy Efficiency</li> | ||
| <li className="px-3 py-1">● Energy Utilization</li> | ||
| <li className="px-3 py-1">● Smart Grids</li> | ||
| <li className="px-3 py-1">● Energy Data Analytics</li> | ||
| </ul> | ||
| </li> | ||
|
|
||
| <li className="relative"> | ||
| <button type="button" | ||
| className={`hover:text-white focus:text-white w-full bg-gray-200 text-left pl-3 py-2 rounded-md font-medium hover:bg-gray-500 focus:outline-none focus:bg-gray-500${toggleCheck2}`} | ||
| onClick={toggleDropdown('track3')}> | ||
| Track III: Renewable Energy | ||
| </button> | ||
| <ul id="track3" | ||
| className={`md:absolute left-full top-0 mt-2 ml-2 w-[400px] md:w-[800px] bg-white rounded-md shadow-lg hidden text-left dropdown-menu open${toggleCheck}`}> | ||
| <li className="px-3 py-1">● IoT Design and Implementations</li> | ||
| <li className="px-3 py-1">● Big Data in IoT</li> | ||
| <li className="px-3 py-1">● Cloud & IoT</li> | ||
| <li className="px-3 py-1">● IoT Applications</li> | ||
| <li className="px-3 py-1">● IoT Enabled Innovation & Entrepreneurship</li> | ||
| <li className="px-3 py-1">● Security and Privacy</li> | ||
|
|
||
| </ul> | ||
| </li> | ||
|
|
||
| <li className="relative"> | ||
| <button type="button" | ||
| className={`hover:text-white focus:text-white w-full bg-gray-200 text-left pl-3 py-2 rounded-md font-medium hover:bg-gray-500 focus:outline-none focus:bg-gray-500${toggleCheck2}`} | ||
| onClick={toggleDropdown('track4')}> | ||
| Track IV: Sustainability | ||
| </button> | ||
| <ul id="track4" | ||
| className={`md:absolute left-full top-0 mt-2 ml-2 w-[400px] md:w-[800px] bg-white rounded-md shadow-lg hidden text-left dropdown-menu open${toggleCheck}`}> | ||
| <li className="px-3 py-1">● Climate Change</li> | ||
| <li className="px-3 py-1">● Carbon Footprint</li> | ||
| <li className="px-3 py-1">● Sustainable Development</li> | ||
| <li className="px-3 py-1">● Sustainable Buildings</li> | ||
| <li className="px-3 py-1">● Waste Management and Recycling</li> | ||
| <div className="w-full"> | ||
| <div className="bg-white pt-12 md:px-[10%]"> | ||
| <div className="pt-16"> | ||
| <h1 className="text-[#c00000] text-center text-3xl font-[600]">TRACKS</h1> | ||
| <div className="w-[100px] h-[2px] mx-auto mt-2 bg-[#365372] rounded-xl mb-8"></div> | ||
| </div> | ||
| <div className="mx-auto md:ml-0 w-[90%] md:w-[300px]"> | ||
| <ul className="space-y-2"> | ||
| {[ | ||
| { | ||
| id: 'track1', | ||
| title: 'Track I: Climate Change', | ||
| items: [ | ||
| 'Climate Change and Health', | ||
| 'Global Warming', | ||
| 'Climate change: modelling, measurements, and predictions', | ||
| 'Change economics, law and policy', | ||
| 'Climate change, Green initiatives and products', | ||
| 'Natural resources and Biodiversity in a warming world', | ||
| 'Impacts, Hazards, risks, and effective adaptation to climate change', | ||
| ], | ||
| }, | ||
| { | ||
| id: 'track2', | ||
| title: 'Track II: Energy', | ||
| items: [ | ||
| 'Energy Economics', | ||
| 'Energy Efficiency', | ||
| 'Energy Utilization', | ||
| 'Smart Grids', | ||
| 'Energy Data Analytics', | ||
| ], | ||
| }, | ||
| { | ||
| id: 'track3', | ||
| title: 'Track III: Renewable Energy', | ||
| items: [ | ||
| 'IoT Design and Implementations', | ||
| 'Big Data in IoT', | ||
| 'Cloud & IoT', | ||
| 'IoT Applications', | ||
| 'IoT Enabled Innovation & Entrepreneurship', | ||
| 'Security and Privacy', | ||
| ], | ||
| }, | ||
| { | ||
| id: 'track4', | ||
| title: 'Track IV: Sustainability', | ||
| items: [ | ||
| 'Climate Change', | ||
| 'Carbon Footprint', | ||
| 'Sustainable Development', | ||
| 'Sustainable Buildings', | ||
| 'Waste Management and Recycling', | ||
| ], | ||
| }, | ||
| { | ||
| id: 'track5', | ||
| title: 'Track V: Artificial Intelligence & Machine Learning', | ||
| items: [ | ||
| 'Web Intelligence Applications and Search', | ||
| 'Semantic Web Techniques and Technologies', | ||
| 'Information Retrieval', | ||
| 'Connectivity and Networking', | ||
| 'Ontology', | ||
| 'Reasoning about Knowledge and Belief', | ||
| ], | ||
| }, | ||
| ].map((track) => ( | ||
| <li key={track.id} className="relative"> | ||
| <button | ||
| type="button" | ||
| className="hover:text-white focus:text-white w-full bg-gray-200 text-left pl-3 py-2 rounded-md font-medium hover:bg-gray-500 focus:outline-none focus:bg-gray-500" | ||
| onClick={() => toggleDropdown(track.id)} | ||
| > | ||
| {track.title} | ||
| </button> | ||
| <ul | ||
| id={track.id} | ||
| className={`md:absolute left-full top-0 mt-2 ml-2 w-[100%] md:w-[800px] bg-white rounded-md shadow-lg ${ | ||
| activeTrack === track.id ? '' : 'hidden' | ||
| } text-left dropdown-menu`} | ||
| > | ||
| {track.items.map((item, index) => ( | ||
| <li key={index} className="px-3 py-1 text-black"> | ||
| ● {item} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </li> | ||
|
|
||
|
|
||
| <li className="relative"> | ||
| <button type="button" | ||
| className={`hover:text-white focus:text-white w-full bg-gray-200 text-left pl-3 py-2 rounded-md font-medium hover:bg-gray-500 focus:outline-none focus:bg-gray-500${toggleCheck2}`} | ||
| onClick={toggleDropdown('track5')}> | ||
| Track V: Artificial Intelligence & Machine Learning | ||
| </button> | ||
| <ul id="track5" | ||
| className={`md:absolute left-full top-0 mt-2 ml-2 w-[400px] md:w-[800px] bg-white rounded-md shadow-lg hidden text-left dropdown-menu open${toggleCheck}`}> | ||
| <li className="px-3 py-1">● Web Intelligence Applications and Search</li> | ||
| <li className="px-3 py-1">● Semantic Web Techniques and Technologies</li> | ||
| <li className="px-3 py-1">● Information Retrieval</li> | ||
| <li className="px-3 py-1">● Connectivity and Networking</li> | ||
| <li className="px-3 py-1">● Ontology</li> | ||
| <li className="px-3 py-1">● Reasoning about Knowledge and Belief</li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {/* <h1 classNameName="tracks-heading heading">Tracks</h1> | ||
| <div classNameName="coming-soon"> | ||
| COMING SOON | ||
| </div> */} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default Tracks; | ||
| export default Tracks; |