ershisan99/DevToysWeb
1
0
Fork 0
mirror of https://github.com/ershisan99/DevToysWeb.git synced 2025-12-17 04:59:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: upgrade to react 19 beta and next 14 canary

Browse Source
This commit is contained in:
andres
2024-05-19 14:53:00 +02:00
parent fe429295ef
commit 63e0be09e6
65 changed files with 2626 additions and 1898 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/sidebar/tool-group.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useCallback, useRef } from "react";
import { useRef } from "react";
import { usePathname } from "next/navigation";
import * as Accordion from "@radix-ui/react-accordion";
@@ -18,7 +18,7 @@ export function ToolGroup({ Icon, title, href, tools, isOpend }: Props) {
const pathname = usePathname();
const triggerRef = useRef<HTMLButtonElement>(null);
const onClick = useCallback(() => triggerRef.current?.click(), []);
const onClick = () => triggerRef.current?.click();
return (
<Accordion.AccordionItem value={href}>
@@ -40,13 +40,13 @@ export function ToolGroup({ Icon, title, href, tools, isOpend }: Props) {
<Accordion.Trigger
ref={triggerRef}
className={cn(
"absolute right-0 flex h-10 w-10 items-center justify-center rounded transition-all duration-0",
"absolute right-0 flex size-10 items-center justify-center rounded transition-all duration-0",
"hover:bg-accent",
"[&[data-state=open]>svg]:rotate-180"
)}
aria-label="toggle open/close state of the tool group"
>
<icons.ChevronDown className="h-4 w-4 transition-transform duration-200" />
<icons.ChevronDown className="size-4 transition-transform duration-200" />
</Accordion.Trigger>
</div>
</Accordion.Header>

6
components/sidebar/tool-link.tsx
View File

@@ -1,6 +1,5 @@
"use client";
import { memo } from "react";
import Link, { LinkProps } from "next/link";
import { Tool } from "@/config/tools";
@@ -14,8 +13,9 @@ type Props = Pick<Tool, "Icon" | "shortTitle"> &
};
// FIXME: css outline messed up
function RawToolLink({ Icon, shortTitle: title, href, onClick, highlight, grouped }: Props) {
export function ToolLink({ Icon, shortTitle: title, href, onClick, highlight, grouped }: Props) {
return (
// @ts-expect-error react 19 beta error
<Link
className={cn(
"flex h-10 items-center gap-3 whitespace-nowrap rounded",
@@ -35,5 +35,3 @@ function RawToolLink({ Icon, shortTitle: title, href, onClick, highlight, groupe
</Link>
);
}
export const ToolLink = memo(RawToolLink);