♻️ (index.tsx): remove unused import of useEffect to improve code cleanliness and readability
📝 (index.tsx): refactor toolbarSelectItem component to improve code formatting and readability
This commit is contained in:
parent
17302a825e
commit
85b5f80bba
1 changed files with 18 additions and 16 deletions
|
|
@ -1,4 +1,3 @@
|
||||||
import { useEffect } from "react";
|
|
||||||
import ForwardedIconComponent from "../../../../../components/genericIconComponent";
|
import ForwardedIconComponent from "../../../../../components/genericIconComponent";
|
||||||
import { toolbarSelectItemProps } from "../../../../../types/components";
|
import { toolbarSelectItemProps } from "../../../../../types/components";
|
||||||
|
|
||||||
|
|
@ -10,7 +9,6 @@ export default function ToolbarSelectItem({
|
||||||
icon,
|
icon,
|
||||||
styleObj,
|
styleObj,
|
||||||
}: toolbarSelectItemProps) {
|
}: toolbarSelectItemProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<ForwardedIconComponent
|
<ForwardedIconComponent
|
||||||
|
|
@ -21,24 +19,28 @@ export default function ToolbarSelectItem({
|
||||||
{isMac ? (
|
{isMac ? (
|
||||||
<ForwardedIconComponent
|
<ForwardedIconComponent
|
||||||
name="Command"
|
name="Command"
|
||||||
className={`absolute right-[${shift ? "2rem" : "1.15rem"}] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.commandClasses}`}
|
className={`absolute right-[${
|
||||||
|
shift ? "2rem" : "1.15rem"
|
||||||
|
}] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.commandClasses}`}
|
||||||
></ForwardedIconComponent>
|
></ForwardedIconComponent>
|
||||||
) : (
|
) : (
|
||||||
<span className={`absolute right-[${shift ? "2.10rem" : "1.15rem"}] top-[0.43em] stroke-2 ${styleObj?.ctrlClasses}`}>
|
<span
|
||||||
{shift ? (
|
className={`absolute ${
|
||||||
"Ctrl"
|
shift ? " right-[2.15rem] " : "right-[1.15rem]"
|
||||||
) : (
|
} top-[0.43em] stroke-2 `}
|
||||||
"Ctrl +"
|
>
|
||||||
)}
|
{shift ? "Ctrl" : "Ctrl +"}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
{shift && (
|
{shift && (
|
||||||
<ForwardedIconComponent
|
<ForwardedIconComponent
|
||||||
name="ArrowBigUp"
|
name="ArrowBigUp"
|
||||||
className={`absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.shiftClasses}`}
|
className={`absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.shiftClasses}`}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<span className={`absolute right-2 top-[0.43em] ${styleObj?.keyClasses}`}>{keyboardKey}</span>
|
<span className={`absolute right-2 top-[0.43em] ${styleObj?.keyClasses}`}>
|
||||||
|
{keyboardKey}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue