mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2026-10-16 06:35:02 +08:00
Arik ChakmaandKamran Ahmed
9c3539eb3a
* feat: implement discover custom roadmaps * feat: add error page * wip: roadmap ratings * wip * feat: implement rating * refactor: roadmap discover page * Update UI * fix: search * fix: search query * Update UI for the discover page * Refactor rating logic * Button changes on the custom roadmap page * Refactor feedback modal * Hide rating from custom roadmaps which are not discoverable * feat: rating feedback pagination * fix: remove per page * Update ratings * fix: button height * Update UI for the discover page --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import { type ReactNode } from 'react';
|
|
import { clsx } from 'clsx';
|
|
|
|
type TooltipProps = {
|
|
children: ReactNode;
|
|
additionalClass?: string;
|
|
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, additionalClass = '', 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,
|
|
additionalClass,
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|