97 lines
2.1 KiB
TypeScript
97 lines
2.1 KiB
TypeScript
import { DashboardCard } from "@/components/card";
|
|
import Image from "next/image";
|
|
import { ReactNode } from "react";
|
|
|
|
interface AppCardProps {
|
|
name: string;
|
|
icon?: string;
|
|
}
|
|
const AppCard = (props: AppCardProps) => {
|
|
const { name, icon } = props;
|
|
const iconPath = icon
|
|
? `/app-icons/${icon}`
|
|
: "app-icons/app-placeholder.svg";
|
|
return (
|
|
<div
|
|
role="button"
|
|
className="flex h-40 w-40 cursor-pointer items-center justify-center rounded-3xl p-2
|
|
align-middle shadow-md ring-2 ring-inset ring-violet-500 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-300"
|
|
>
|
|
<div className="flex w-full flex-col justify-center">
|
|
<div className="my-1 flex h-[22] w-[22] items-center justify-center self-center overflow-visible p-1">
|
|
<Image
|
|
src={iconPath}
|
|
alt={`${name}-app-icon`}
|
|
width={18 * 3}
|
|
height={18 * 3}
|
|
/>
|
|
</div>
|
|
<div className="flex w-full justify-center">{name}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
type App = {
|
|
name: string;
|
|
icon?: string;
|
|
};
|
|
|
|
const apps = [
|
|
{
|
|
name: "Firefox",
|
|
icon: "firefox.svg",
|
|
},
|
|
{
|
|
name: "Discord",
|
|
icon: "discord.svg",
|
|
},
|
|
{
|
|
name: "Docs",
|
|
},
|
|
{
|
|
name: "Dochub",
|
|
icon: "dochub.svg",
|
|
},
|
|
{
|
|
name: "Chess",
|
|
icon: "chess.svg",
|
|
},
|
|
{
|
|
name: "Games",
|
|
icon: "games.svg",
|
|
},
|
|
{
|
|
name: "Mail",
|
|
icon: "mail.svg",
|
|
},
|
|
{
|
|
name: "Public transport",
|
|
icon: "public-transport.svg",
|
|
},
|
|
{
|
|
name: "Outlook",
|
|
icon: "mail.svg",
|
|
},
|
|
{
|
|
name: "Youtube",
|
|
icon: "youtube.svg",
|
|
},
|
|
];
|
|
|
|
export const AppOverview = () => {
|
|
return (
|
|
<DashboardCard title="Applications">
|
|
<div className="flex h-full w-full justify-center">
|
|
<div className="flex h-full w-fit justify-center">
|
|
<div className="grid w-full auto-cols-min auto-rows-min grid-cols-2 gap-8 py-8 sm:grid-cols-3 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 ">
|
|
{apps.map((app) => (
|
|
<AppCard key={app.name} name={app.name} icon={app.icon} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DashboardCard>
|
|
);
|
|
};
|