feat: fix lucide-react renders
feat: fix mobile designs feat: remove conflicting react-hook-form feat: change update-account-form path
This commit is contained in:
@@ -50,7 +50,7 @@ const AnalysisLevelBar = ({
|
||||
level: AnalysisResultLevel;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex h-3 w-full max-w-[360px] gap-1">
|
||||
<div className="mt-4 flex h-3 w-full max-w-[360px] gap-1 sm:mt-0">
|
||||
{normLowerIncluded && (
|
||||
<>
|
||||
<Level
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
import React from 'react';
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { Info } from 'lucide-react';
|
||||
|
||||
import { cn } from '@kit/ui/utils';
|
||||
|
||||
import AnalysisLevelBar, { AnalysisResultLevel } from './analysis-level-bar';
|
||||
|
||||
export enum AnalysisStatus {
|
||||
@@ -33,6 +37,7 @@ const Analysis = ({
|
||||
normUpper: number;
|
||||
};
|
||||
}) => {
|
||||
const [showTooltip, setShowTooltip] = useState(false);
|
||||
const isUnderNorm = value < normLower;
|
||||
const getAnalysisResultLevel = () => {
|
||||
if (isUnderNorm) {
|
||||
@@ -54,12 +59,21 @@ const Analysis = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border-border flex items-center justify-between rounded-lg border px-5 py-3">
|
||||
<div className="border-border grid grid-cols-2 items-center justify-between rounded-lg border px-5 py-3 sm:flex">
|
||||
<div className="flex items-center gap-2 font-semibold">
|
||||
{name}
|
||||
<div className="group/tooltip relative">
|
||||
<div
|
||||
className="group/tooltip relative"
|
||||
onClick={() => setShowTooltip(!showTooltip)}
|
||||
onMouseLeave={() => setShowTooltip(false)}
|
||||
>
|
||||
<Info className="hover" />{' '}
|
||||
<div className="absolute bottom-full left-1/2 z-10 mb-2 hidden -translate-x-1/2 rounded bg-gray-800 px-2 py-1 text-sm whitespace-nowrap text-white group-hover/tooltip:block">
|
||||
<div
|
||||
className={cn(
|
||||
'absolute bottom-full left-1/2 z-10 mb-2 hidden -translate-x-1/2 rounded border bg-white p-4 text-sm whitespace-nowrap group-hover/tooltip:block',
|
||||
{ block: showTooltip },
|
||||
)}
|
||||
>
|
||||
This text changes when you hover the box above.
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,7 +82,7 @@ const Analysis = ({
|
||||
<div className="font-semibold">{value}</div>
|
||||
<div className="text-muted-foreground text-sm">{unit}</div>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-center text-sm">
|
||||
<div className="text-muted-foreground mt-4 flex gap-2 text-center text-sm sm:mt-0 sm:block sm:gap-0">
|
||||
{normLower} - {normUpper}
|
||||
<div>Normaalne vahemik</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user