-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1213 from sccalabr/1204
Replacing About with a Help dropdown that has contact and documentati…
- Loading branch information
Showing
10 changed files
with
168 additions
and
75 deletions.
There are no files selected for viewing
Binary file not shown.
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,97 @@ | ||
| import React, { useState, useRef, useEffect } from 'react'; | ||
| import InfoDark from '../assets/info-dark.svg'; | ||
| import PageIcon from '../assets/documentation.svg'; // Ensure this path is correct | ||
| import EmailIcon from '../assets/envelope.svg'; // Replace with your actual email icon path | ||
|
|
||
| const Help = () => { | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const dropdownRef = useRef<HTMLDivElement | null>(null); | ||
| const buttonRef = useRef<HTMLButtonElement | null>(null); | ||
|
|
||
| const toggleDropdown = () => { | ||
| setIsOpen((prev) => !prev); | ||
| }; | ||
|
|
||
| const handleClickOutside = (event: MouseEvent) => { | ||
| if ( | ||
| dropdownRef.current && | ||
| !dropdownRef.current.contains(event.target as Node) && | ||
| buttonRef.current && | ||
| !buttonRef.current.contains(event.target as Node) | ||
| ) { | ||
| setIsOpen(false); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| document.addEventListener('mousedown', handleClickOutside); | ||
| return () => { | ||
| document.removeEventListener('mousedown', handleClickOutside); | ||
| }; | ||
| }, []); | ||
|
|
||
| const dropdownPosition = () => { | ||
| if (!buttonRef.current) return { top: '100%', left: '0' }; | ||
|
|
||
| const rect = buttonRef.current.getBoundingClientRect(); | ||
| const dropdownHeight = 80; // Adjust based on the content height | ||
| const spaceBelow = window.innerHeight - rect.bottom; | ||
|
|
||
| const dropdownWidth = 192; // Adjust to fit your design | ||
| const spaceRight = window.innerWidth - rect.right; | ||
|
|
||
| let leftPosition = 0; // Default to align with the button | ||
|
|
||
| if (spaceRight < dropdownWidth) { | ||
| leftPosition = dropdownWidth - rect.width; | ||
| } | ||
|
|
||
| if (spaceBelow >= dropdownHeight) { | ||
| return { top: '100%', left: `${leftPosition}px` }; // Open downward | ||
| } else { | ||
| return { top: `${-dropdownHeight}px`, left: `${leftPosition}px` }; // Open upward | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="relative inline-block" ref={dropdownRef}> | ||
| <button | ||
| ref={buttonRef} | ||
| onClick={toggleDropdown} | ||
| className="flex items-center rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E] px-3 py-1" | ||
| > | ||
| <img | ||
| src={InfoDark} | ||
| alt="icon" | ||
| className="m-2 w-6 self-center text-sm filter dark:invert" | ||
| /> | ||
| Help | ||
| </button> | ||
| {isOpen && ( | ||
| <div | ||
| className={`absolute mt-2 w-48 shadow-lg bg-white dark:bg-gray-800`} | ||
| style={{ ...dropdownPosition(), borderRadius: '0.5rem' }} | ||
| > | ||
| <a | ||
| href="https://docs.docsgpt.cloud/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="flex items-center px-4 py-2 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" | ||
| > | ||
| <img src={PageIcon} alt="Documentation" className="mr-2 w-4 h-4" /> | ||
| Documentation | ||
| </a> | ||
| <a | ||
| href="mailto:[email protected]" | ||
| className="flex items-center px-4 py-2 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" | ||
| > | ||
| <img src={EmailIcon} alt="Email Us" className="mr-2 w-4 h-4" /> | ||
| Email Us | ||
| </a> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Help; |
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 |
|---|---|---|
|
|
@@ -25,7 +25,7 @@ i18n | |
| zh: { | ||
| translation: zh, | ||
| }, | ||
| "zh-TW": { | ||
| 'zh-TW': { | ||
| translation: zhTW, | ||
| }, | ||
| }, | ||
|
|
||