Arik ChakmaandKamran Ahmed
8310671123
* wip: custom roadmap renderer * wip: custom roadmap events * wip: roadmap content * wip: svg styles * wip: custom roadmap progress * Render progress * Shortcut progress * Progress Tracking styles * wip: edit and share button * fix: disabled the share button * wip: content links rendering * Fix progress share * Replace disabled with `canShare` * wip: show custom roadmaps * wip: users all roadmaps * fix: create roadmap api * chore: roadmap sidebar icon * wip: content links * Update links color * Create roadmap home * Create Roadmap button * Roadmap type * chore: share progress modal * wip: share roadmap * wip: change visibility * chore: custom roadmap progress in activity * wip: custom roadmap share progress * chore: friend's roadmap * wip: custom roadmap skeleton * chore: roadmap title * Restricted Page * fix: skeleton loading width * Fix create roadmap button * chore: remove user id * chore: pick roadmap and share * chore: open new tab on create roadmap * chore: change share title * chore: use team id from params * chore: team roadmap create modal * chore: create team roadmap * chore: custom roadmap modal * chore: placeholde roadmaps * chore: roadmap hint * chore: visibility label * chore: public roadmap * chore: empty screen * chore: team progress * chore: create roadmap responsive * chore: form error * chore: multi user history * wip: manage custom roadmap * chore: empty roadmap list * chore: custom roadmap visit * chore: shared roadmaps * chore: shared roadmaps * chore: empty screen and topic title * chore: show progress bar * Implement Error in topic details * Add Modal close button * fix: link groups * Refactor roadmap creation * Refactor roadmap creation * Refactor team creation * Refactor team roadmaps * Refactor team creation roadmap selection * Refactor * Refactor team roadmap loading * Refactor team roadmaps * Refactor team roadmaps listing * Refactor Account dropdown * Updates * Refactor Account dropdown * Fix Team name overflow * Change Icon color * Update team dropdown * Minor UI fixes * Fix minor UI * Flicker fix in team dropdown * Roadmap action dropdown with responsiveness * Team roadmaps listing * Update team settings * Team roadmaps listing * fix: remove visibility change * Update roadmap options modal * Add dummy renderer * Add renderer script * Add generate renderer script * Add generate renderer * wip: add share settings * Update * Update UI * Update Minor UI * Fix team issue * Update Personal roadmaps UI * Add Roadmap Secret * Update teams type * Rearrange sections * Change Secret name * Add action button on roadmap detail page --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import { type ReactNode } from 'react';
|
|
import { clsx } from 'clsx';
|
|
|
|
type TooltipProps = {
|
|
children: ReactNode;
|
|
position?:
|
|
| 'right-center'
|
|
| 'right-top'
|
|
| 'right-bottom'
|
|
| 'left-center'
|
|
| 'left-top'
|
|
| 'left-bottom'
|
|
| 'top-center'
|
|
| 'top-left'
|
|
| 'top-right'
|
|
| 'bottom-center'
|
|
| 'bottom-left'
|
|
| 'bottom-right';
|
|
};
|
|
|
|
export function Tooltip(props: TooltipProps) {
|
|
const { children, position = 'right-center' } = props;
|
|
|
|
let positionClass = '';
|
|
if (position === 'right-center') {
|
|
positionClass = 'left-full top-1/2 -translate-y-1/2 translate-x-1 ';
|
|
} else if (position === 'top-center') {
|
|
positionClass = 'bottom-full left-1/2 -translate-x-1/2 -translate-y-0.5';
|
|
} else if (position === 'bottom-center') {
|
|
positionClass = 'top-full left-1/2 -translate-x-1/2 translate-y-0.5';
|
|
} else if (position === 'left-center') {
|
|
positionClass = 'right-full top-1/2 -translate-y-1/2 -translate-x-1';
|
|
} else if (position === 'right-top') {
|
|
positionClass = 'left-full top-0';
|
|
} else if (position === 'right-bottom') {
|
|
positionClass = 'left-full bottom-0';
|
|
} else if (position === 'left-top') {
|
|
positionClass = 'right-full top-0';
|
|
} else if (position === 'left-bottom') {
|
|
positionClass = 'right-full bottom-0';
|
|
} else if (position === 'top-left') {
|
|
positionClass = 'bottom-full left-0';
|
|
} else if (position === 'top-right') {
|
|
positionClass = 'bottom-full right-0';
|
|
} else if (position === 'bottom-left') {
|
|
positionClass = 'top-full left-0';
|
|
} else if (position === 'bottom-right') {
|
|
positionClass = 'top-full right-0';
|
|
}
|
|
|
|
return (
|
|
<span
|
|
className={clsx(
|
|
'pointer-events-none absolute z-10 block w-max transform rounded-md bg-gray-900 px-2 py-1 text-sm font-medium text-white opacity-0 shadow-sm duration-100 group-hover:opacity-100',
|
|
positionClass
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|