generated from UofA-Blueprint/ScaffoldTool
-
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.
added hover, and edited font size in Button element (no self-resizing)
- Loading branch information
Showing
7 changed files
with
152 additions
and
40 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
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 |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| // As shown in TestSquareProps | ||
| export interface DropdownItemProps { | ||
| text: string; | ||
| isSelected: boolean; | ||
| onSelect: () => void; | ||
| } | ||
|
|
||
| function DropdownItem({ text, isSelected, onSelect }:DropdownItemProps) { | ||
| return ( | ||
| <li | ||
| className={`py-1 pr-4 pl-2 rounded-lg h-8 hover:bg-neutrals-light-500 cursor-pointer ${isSelected ? 'font-bold' : 'font-normal'}`} onClick={onSelect}> | ||
|
|
||
| <a className=" text-neutrals-dark-500 font-display">{text}</a> | ||
| </li> | ||
| ); | ||
| } | ||
|
|
||
| export default DropdownItem; |
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 |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { useEffect, useRef, useState } from "react"; | ||
| import DropdownItem from "./DropdownItem"; | ||
| import { CaretDown } from "@phosphor-icons/react"; | ||
|
|
||
| function SortDropdownList() { | ||
| // Options that can be later add in | ||
| const items = [ | ||
| "Newest to Oldest", | ||
| "Oldest to Newest", | ||
| "Most-Least Storage", | ||
| "Recently Updated", | ||
| ]; | ||
|
|
||
| // State to keep track of the currently selected option | ||
| const [selectedItem, setSelectedItem] = useState<string | null>( | ||
| null | ||
| ); // useState expect either string or null var | ||
|
|
||
| // State to keep track of the menu is being open or not | ||
| const [open, setOpen] = useState(false); | ||
|
|
||
| // Check if user click outside of the menu to close it | ||
| let menuRef = useRef<HTMLInputElement>(null); // Typescript like this | ||
|
|
||
| useEffect(() => { | ||
| let handler = (e: any) => { | ||
| if (menuRef.current && !menuRef.current.contains(e.target)) { | ||
| // Check menuRef.current is not null before calling .contains | ||
| setOpen(false); | ||
| } | ||
| }; | ||
|
|
||
| document.addEventListener("mousedown", handler); | ||
|
|
||
| return () => { | ||
| // Clean up to prevent memory leaks and avoid running outdated event handlers | ||
| document.removeEventListener("mousedown", handler); | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="relative w-full" ref={menuRef}> | ||
| {/* For the menu trigger */} | ||
| <div | ||
| className={`w-full cursor-pointer font-body h-10 bg-status-blue-light flex justify-between items-center px-4 py-2 ${ | ||
| open ? "rounded-t-lg mb-2" : "rounded-lg" | ||
| } `} | ||
| onClick={() => setOpen(!open)} | ||
| > | ||
| Sort | ||
| {/* The arrow symbol */} | ||
| <CaretDown size={24} /> | ||
| </div> | ||
|
|
||
| {/* For the dropdown options */} | ||
| <div | ||
| className={`bg-status-blue-light p-4 rounded-b-lg z-10 absolute w-full ${ | ||
| open ? "visible opacity-1" : "invisible opacity-0" | ||
| }`} | ||
| > | ||
| <div className={`flex flex-col gap-2`}> | ||
| <ul> | ||
| {items.map((item, index) => ( | ||
| <DropdownItem | ||
| key={index} | ||
| text={item} | ||
| isSelected={selectedItem === item} // Check if matched with the selected option | ||
| onSelect={() => setSelectedItem(item)} // set the selectedItem to that option and when it re-render it will be check by the line above | ||
| /> | ||
| ))} | ||
| </ul> | ||
| {/* for fun */} | ||
| <button className="text-white border bg-primary-main"> | ||
| Reset | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default SortDropdownList; |
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 |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import DropdownItem from "../components/DropdownItem"; | ||
| import SortDropdownList from "../components/SortDropdownList"; | ||
|
|
||
| function SortDropdownListTestRoute() { | ||
| return ( | ||
| <div className="flex flex-col items-center justify-center min-h-screen"> | ||
| <div className="text-h2">Hello</div> | ||
| <div className="text-body-reg"> | ||
| Is this the sort dropdown list that you looking for?😩 | ||
| </div> | ||
| <div className="w-1/4"> | ||
| <SortDropdownList /> | ||
| </div> | ||
| <div>What happen If I do this?</div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default SortDropdownListTestRoute; |