diff --git a/src/renderer/components/models-management/model-item.component.tsx b/src/renderer/components/models-management/model-item.component.tsx index 6110b504..701139a9 100644 --- a/src/renderer/components/models-management/model-item.component.tsx +++ b/src/renderer/components/models-management/model-item.component.tsx @@ -1,6 +1,6 @@ import equal from "fast-deep-equal"; import { memo, useRef, useState } from "react"; -import { MSModel, MSModelType } from "shared/models/models/model-saber.model"; +import { MSModel } from "shared/models/models/model-saber.model"; import { BsmImage } from "../shared/bsm-image.component"; import { motion } from "framer-motion"; import { GlowEffect } from "../shared/glow-effect.component"; @@ -11,12 +11,14 @@ import Tippy from "@tippyjs/react"; import { followCursor } from "tippy.js" import defaultImage from '../../../../assets/images/default-version-img.jpg' import { BsmLocalModel } from "shared/models/models/bsm-local-model.interface"; -import { BsmIcon, BsmIconType } from "../svgs/bsm-icon.component"; +import { BsmIconType } from "../svgs/bsm-icon.component"; import { BsmButton } from "../shared/bsm-button.component"; import { BsmBasicSpinner } from "../shared/bsm-basic-spinner/bsm-basic-spinner.component"; import { isValidUrl } from "shared/helpers/url.helpers"; import { useTranslation } from "renderer/hooks/use-translation.hook"; import useDoubleClick from "use-double-click"; +import { useDelayedState } from "renderer/hooks/use-delayed-state.hook"; +import { ChevronTopIcon } from "../svgs/icons/chevron-top-icon.component"; type Props = { selected?: boolean, @@ -35,6 +37,7 @@ function modelItem(props: Props) { const t = useTranslation(); const color = useThemeColor("first-color"); const [hovered, setHovered] = useState(false); + const [infosHovered, setInfosHovered] = useDelayedState(false); const [idContentCopied, setIdContentCopied] = useState(null); const ref = useRef(); @@ -114,10 +117,16 @@ function modelItem(props: Props) { )} - {e.stopPropagation(); e.preventDefault()}}> + {e.stopPropagation(); e.preventDefault()}} + onHoverStart={() => setInfosHovered(true, 150)} + onHoverEnd={() => setInfosHovered(false, 150)} + style={{top: infosHovered ? "0" : "83%"}} + >
{props.name} - + [setInfosHovered(false, 0), console.log("dallo")]}/>
{props.author ?? ''}
    diff --git a/src/renderer/components/svgs/icons/chevron-top-icon.component.tsx b/src/renderer/components/svgs/icons/chevron-top-icon.component.tsx index b6af5f02..d7b54dff 100644 --- a/src/renderer/components/svgs/icons/chevron-top-icon.component.tsx +++ b/src/renderer/components/svgs/icons/chevron-top-icon.component.tsx @@ -1,8 +1,6 @@ -import { CSSProperties } from "react"; - -export function ChevronTopIcon(props: {className?: string, style?: CSSProperties}) { +export function ChevronTopIcon(props: React.ComponentProps<"svg">) { return ( - + )