yellowadmin/pp-tcms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace svg icon with Lucide icon

Browse Source
This commit is contained in:
Takeshi Kimata
2024-02-21 22:26:51 +09:00
parent 9a82627149
commit a835e2f836
5 changed files with 13 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/app/projects/[projectId]/dashboard/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Page() {
return <>This is Dashboard tab</>;
}

3
frontend/app/projects/[projectId]/home/page.tsx
View File

@@ -1,3 +0,0 @@
export default function Page() {
return <>This is Home tab</>;
}

12
frontend/app/projects/[projectId]/sidebar.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Menu, MenuItem } from "@nextui-org/react";
import { HomeIcon, PagesIcon, PlayIcon } from "@/components/icons";
import { LayoutDashboard, Files, FlaskConical } from "lucide-react";
import { useRouter } from "next/navigation";
import useGetCurrentIds from "@/utils/useGetCurrentIds";
@@ -11,21 +11,21 @@ export default function Sidebar() {
<div className="w-64 bg-white border-r-1">
<Menu aria-label="sidebar">
<MenuItem
startContent={<HomeIcon size={28} />}
startContent={<LayoutDashboard strokeWidth={1} size={28} />}
className="p-3"
onClick={() => router.push(`/projects/${projectId}/home`)}
onClick={() => router.push(`/projects/${projectId}/dashboard`)}
>
Home
Dashboard
</MenuItem>
<MenuItem
startContent={<PagesIcon size={28} />}
startContent={<Files strokeWidth={1} size={28} />}
className="p-3"
onClick={() => router.push(`/projects/${projectId}/folders`)}
>
Test Cases
</MenuItem>
<MenuItem
startContent={<PlayIcon size={28} />}
startContent={<FlaskConical strokeWidth={1} size={28} />}
className="p-3"
onClick={() => router.push(`/projects/${projectId}/runs`)}
>

8
frontend/app/projects/project-card.tsx
View File

@@ -11,7 +11,7 @@ import {
CardBody,
Divider,
} from "@nextui-org/react";
import { DotsIcon } from "@/components/icons";
import { MoreVertical } from "lucide-react";
export function ProjectCard({ project, onEditClicked, onDeleteClicked }) {
return (
@@ -19,13 +19,13 @@ export function ProjectCard({ project, onEditClicked, onDeleteClicked }) {
<CardHeader className="flex gap-3 h-[50px] justify-between text-ellipsis overflow-hidden">
<div className="flex gap-5">
<div className="flex flex-col gap-1 items-start justify-center">
<Link href={`/projects/${project.id}/home`}>{project.name}</Link>
<Link href={`/projects/${project.id}/dashboard`}>{project.name}</Link>
</div>
</div>
<Dropdown>
<DropdownTrigger>
<Button isIconOnly variant="light" size="sm">
<DotsIcon size={16} />
<Button isIconOnly size="sm" className="bg-transparent rounded-full">
<MoreVertical size={16} />
</Button>
</DropdownTrigger>
<DropdownMenu aria-label="Static Actions">

100
frontend/components/icons.tsx
View File

@@ -184,103 +184,3 @@ export const SearchIcon = (props: IconSvgProps) => (
/>
</svg>
);
export const HomeIcon: React.FC<IconSvgProps> = ({
size = 24,
width,
height,
...props
}) => {
return (
<svg
viewBox="0 0 21 21"
fill="currentColor"
height={size || height}
width={size || height}
{...props}
>
<g
fill="none"
fillRule="evenodd"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M1.5 10.5l9-9 9 9" />
<path d="M3.5 8.5v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
</g>
</svg>
);
};
export const PagesIcon: React.FC<IconSvgProps> = ({
size = 24,
width,
height,
...props
}) => {
return (
<svg
viewBox="0 0 21 21"
fill="currentColor"
height={size || height}
width={size || height}
{...props}
>
<g
fill="none"
fillRule="evenodd"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M15.5 3.5h-7a2 2 0 00-2 2v9a2 2 0 002 2h7a2 2 0 002-2v-9a2 2 0 00-2-2z" />
<path d="M6.5 5.5a2 2 0 00-2 2v8a3 3 0 003 3h6a2 2 0 002-2" />
</g>
</svg>
);
};
export const PlayIcon: React.FC<IconSvgProps> = ({
size = 24,
width,
height,
...props
}) => {
return (
<svg
viewBox="0 0 512 512"
fill="currentColor"
height={size || height}
width={size || height}
{...props}
>
<path
fill="none"
stroke="currentColor"
strokeMiterlimit={10}
strokeWidth={32}
d="M112 111v290c0 17.44 17 28.52 31 20.16l247.9-148.37c12.12-7.25 12.12-26.33 0-33.58L143 90.84c-14-8.36-31 2.72-31 20.16z"
/>
</svg>
);
};
export const DotsIcon: React.FC<IconSvgProps> = ({
size = 24,
width,
height,
...props
}) => {
return (
<svg
viewBox="0 0 24 24"
fill="currentColor"
height={size || height}
width={size || height}
{...props}
>
<path d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
</svg>
);
};