🔧 chore: add tooltip on hover projectcard name

This commit is contained in:
Andre H 2024-03-07 14:22:10 +08:00
parent 3fdc0b2dff
commit 3a84832da5

View File

@ -1,12 +1,18 @@
import {
Menu,
MenuHandler,
MenuItem,
MenuList,
} from '@material-tailwind/react';
import React, { import React, {
ComponentPropsWithoutRef, ComponentPropsWithoutRef,
MouseEvent, MouseEvent,
useCallback, useCallback,
} from 'react'; } from 'react';
import { ProjectCardTheme, projectCardTheme } from './ProjectCard.theme'; import { useNavigate } from 'react-router-dom';
import { Project } from 'gql-client'; import { Project } from 'gql-client';
import { Avatar } from 'components/shared/Avatar';
import { Button } from 'components/shared/Button'; import { Button } from 'components/shared/Button';
import { WavyBorder } from 'components/shared/WavyBorder';
import { import {
BranchIcon, BranchIcon,
ClockIcon, ClockIcon,
@ -14,16 +20,11 @@ import {
HorizontalDotIcon, HorizontalDotIcon,
WarningDiamondIcon, WarningDiamondIcon,
} from 'components/shared/CustomIcon'; } from 'components/shared/CustomIcon';
import { Tooltip } from 'components/shared/Tooltip';
import { WavyBorder } from 'components/shared/WavyBorder';
import { relativeTimeMs } from 'utils/time'; import { relativeTimeMs } from 'utils/time';
import { useNavigate } from 'react-router-dom';
import { Avatar } from 'components/shared/Avatar';
import { getInitials } from 'utils/geInitials'; import { getInitials } from 'utils/geInitials';
import { import { ProjectCardTheme, projectCardTheme } from './ProjectCard.theme';
Menu,
MenuHandler,
MenuItem,
MenuList,
} from '@material-tailwind/react';
export interface ProjectCardProps export interface ProjectCardProps
extends ComponentPropsWithoutRef<'div'>, extends ComponentPropsWithoutRef<'div'>,
@ -72,7 +73,9 @@ export const ProjectCard = ({
/> />
{/* Title and website */} {/* Title and website */}
<div className={theme.content()}> <div className={theme.content()}>
<p className={theme.title()}>{project.name}</p> <Tooltip content={project.name}>
<p className={theme.title()}>{project.name}</p>
</Tooltip>
<p className={theme.description()}> <p className={theme.description()}>
{project.deployments[0]?.domain?.name ?? 'No domain'} {project.deployments[0]?.domain?.name ?? 'No domain'}
</p> </p>