LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 08:33:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(help): ui

Browse Source
This commit is contained in:
ManishMadan2882
2024-10-15 02:05:25 +05:30
parent 44405b250c
commit 7ccd74b022
2 changed files with 23 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/Navigation.tsx
View File

@@ -361,9 +361,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
<div className="flex flex-col justify-end text-eerie-black dark:text-white">
<div className="flex justify-between items-center px-1 py-1">
<div className="flex items-center gap-1">
<div className="rounded-full hover:bg-gray-100 dark:hover:bg-[#28292E]">
<Help />
</div>
<Help />
</div>
<div className="flex items-center gap-1">
<NavLink

62
frontend/src/components/Help.tsx
View File

@@ -1,7 +1,7 @@
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
import { useState, useRef, useEffect } from 'react';
import Info from '../assets/info.svg';
import PageIcon from '../assets/documentation.svg';
import EmailIcon from '../assets/envelope.svg';
const Help = () => {
const [isOpen, setIsOpen] = useState(false);
@@ -30,62 +30,44 @@ const Help = () => {
};
}, []);
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}>
<div className="relative inline-block text-sm" 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"
className="my-auto mx-4 w-full flex items-center h-9 gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
>
<img
src={InfoDark}
alt="icon"
className="m-2 w-6 self-center text-sm filter dark:invert"
/>
<img src={Info} alt="info" className="ml-1 w-5 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' }}
className={`absolute -translate-y-28 z-10 w-48 shadow-lg bg-white dark:bg-[#444654] rounded-xl`}
>
<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"
className="flex items-start gap-4 px-4 py-2 text-black dark:text-white hover:bg-bright-gray dark:hover:bg-[#545561] rounded-t-xl"
>
<img src={PageIcon} alt="Documentation" className="mr-2 w-4 h-4" />
<img
src={PageIcon}
alt="Documentation"
className="filter dark:invert"
width={20}
/>
Documentation
</a>
<a
href="mailto:contact@arc53.com"
className="flex items-center px-4 py-2 text-black dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
className="flex items-start gap-4 px-4 py-2 text-black dark:text-white hover:bg-bright-gray dark:hover:bg-[#545561] rounded-b-xl"
>
<img src={EmailIcon} alt="Email Us" className="mr-2 w-4 h-4" />
<img
src={EmailIcon}
alt="Email Us"
className="filter dark:invert p-0.5"
width={20}
/>
Email Us
</a>
</div>