mirror of
https://github.com/luckfox-eng29/kvm.git
synced 2026-06-03 03:42:58 +02:00
7ccb8e617c
* chore: Upgrade UI vite and tailwind packages Vite 5.2.0 -> 6.3.5 @vitejs/plugin-basic-ssl 1.2.0 -> 2.0.0 cva: 1.0.0-beta.1 -> 1.0.0-beta.3 focus-trap-react 10.2.3 -> 11.0.3 framer-motion 11.15.0 -> 12.11.0 @tailwindcss/postcss 4.1.6 @tailwindcss/vite 4.1.6 tailwind 3.4.17 -> 4.1.6 tailwind-merge 2.5.5 -> 3.3.0 Minor updates: @headlessui/react 2.2.2 -> 2.2.3 @types/react 19.1.3 -> 19.1.4 @types/react-dom 19.1.3 -> 19.1.5 @typescript-eslint/eslint-plugin 8.32.0 -> 8.32.1 @typescript-eslint/parser 8.32.0 -> 8.32.1 react-simple-keyboard 3.8.71 -> 3.8.72 The new version of vite required an Node 22.15 (since that's current LTS and node 21.x is EOL) The changes to css due to the tailwind 3 to 4 upgrade were done following [the upgrade guide](https://tailwindcss.com/docs/upgrade-guide#changes-from-v3) Done in this order (important): `shadow-sm` -> `shadow-xs` `shadow` -> `shadown-sm` `rounded` -> `rounded-sm` `outline-none` -> `outline-hidden` `32rem_32rem_at_center` -> `center_at_32rem_32rem` (revised order of gradient props) `ring-1 ring-black ring-opacity-5` -> `ring-1 ring-black/50` `flex-shrink-0` -> `shrink-0` `flex-grow-0` -> `grow-0` `outline outline-1` -> `outline-1` ALSO removed the **extra** `opacity-0` on the video element (trips up latest tailwind causing the video to be invisible) FocusTrap is now not exported as the default, so change those imports headlessui's Menu completely changed, so upgrade to the new syntax which necessitated a reorganization of the Header.tsx to enable the "menu" to still work * Update eslint config and fix errors
75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
import { CheckIcon } from "@heroicons/react/16/solid";
|
|
|
|
import { cva, cx } from "@/cva.config";
|
|
import Card from "@/components/Card";
|
|
|
|
interface Props {
|
|
nSteps: number;
|
|
currStepIdx: number;
|
|
size?: keyof typeof sizes;
|
|
}
|
|
|
|
const sizes = {
|
|
SM: "text-xs leading-[12px]",
|
|
MD: "text-sm leading-[14px]",
|
|
};
|
|
|
|
const variants = cva({
|
|
variants: {
|
|
size: sizes,
|
|
},
|
|
});
|
|
|
|
export default function StepCounter({ nSteps, currStepIdx, size = "MD" }: Props) {
|
|
const textStyle = variants({ size });
|
|
return (
|
|
<Card className="!inline-flex w-auto select-none items-center justify-center gap-x-2 rounded-lg p-1">
|
|
{[...Array(nSteps).keys()].map(i => {
|
|
if (i < currStepIdx) {
|
|
return (
|
|
<div
|
|
className={cx(
|
|
"flex items-center justify-center rounded-full border border-blue-800 bg-blue-700 text-slate-600 dark:border-blue-300",
|
|
textStyle,
|
|
size === "SM" ? "h-5 w-5" : "h-6 w-6",
|
|
)}
|
|
key={`${i}-${currStepIdx}`}
|
|
>
|
|
<CheckIcon className="h-3.5 w-3.5 text-white" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (i === currStepIdx) {
|
|
return (
|
|
<div
|
|
className={cx(
|
|
"rounded-md border border-blue-800 bg-blue-700 px-2 py-1 font-medium text-white shadow-xs dark:border-blue-300",
|
|
textStyle,
|
|
)}
|
|
key={`${i}-${currStepIdx}`}
|
|
>
|
|
Step {i + 1}
|
|
</div>
|
|
);
|
|
}
|
|
if (i > currStepIdx) {
|
|
return (
|
|
<Card
|
|
className={cx(
|
|
"flex items-center justify-center !rounded-full text-slate-600 dark:text-slate-400",
|
|
textStyle,
|
|
size === "SM" ? "h-5 w-5" : "h-6 w-6",
|
|
)}
|
|
key={`${i}-${currStepIdx}`}
|
|
>
|
|
{i + 1}
|
|
</Card>
|
|
);
|
|
}
|
|
return null;
|
|
})}
|
|
</Card>
|
|
);
|
|
}
|