core/Projektarbeit-MYP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update styles and icons

Browse Source
This commit is contained in:
Torben Haack
2024-10-11 21:24:19 +02:00
parent 16beeb94a6
commit 6f4ce01645
9 changed files with 138 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/reservation-platform/src/components/header/index.tsx
View File

@@ -1,7 +1,7 @@
import { HeaderNavigation } from "@/components/header/navigation";
import { LoginButton } from "@/components/login-button";
import { LogoutButton } from "@/components/logout-button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
@@ -13,7 +13,7 @@ import {
} from "@/components/ui/dropdown-menu";
import { validateRequest } from "@/server/auth";
import { UserRole, hasRole } from "@/server/auth/permissions";
import { ScanFaceIcon, StickerIcon, UserIcon, WrenchIcon } from "lucide-react";
import { StickerIcon, UserIcon, WrenchIcon } from "lucide-react";
import Link from "next/link";
import { If, Then } from "react-if";
@@ -78,14 +78,7 @@ export async function Header() {
</DropdownMenuContent>
</DropdownMenu>
)}
{user == null && (
<Button variant={"ghost"} className="gap-2 flex items-center" asChild>
<Link href="/auth/login">
<ScanFaceIcon className="w-4 h-4" />
<span>Anmelden</span>
</Link>
</Button>
)}
{user == null && <LoginButton />}
</div>
</header>
);

13
packages/reservation-platform/src/components/header/navigation.tsx
View File

@@ -1,10 +1,12 @@
"use client";
import { cn } from "@/utils/styles";
import { ContactRoundIcon, LayersIcon } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
interface Site {
name: string;
icon: JSX.Element;
path: string;
}
@@ -12,7 +14,8 @@ export function HeaderNavigation() {
const pathname = usePathname();
const sites: Site[] = [
{
name: "Mein Dashboard",
name: "Dashboard",
icon: <LayersIcon className="w-4 h-4" />,
path: "/",
},
/* {
@@ -21,6 +24,7 @@ export function HeaderNavigation() {
}, */
{
name: "Mein Profil",
icon: <ContactRoundIcon className="w-4 h-4" />,
path: "/my/profile",
},
];
@@ -31,12 +35,13 @@ export function HeaderNavigation() {
<Link
key={site.path}
href={site.path}
className={cn("transition-colors hover:text-neutral-50", {
"text-neutral-50": pathname === site.path,
className={cn("transition-colors hover:text-neutral-50 flex items-center gap-x-1", {
"text-primary-foreground font-semibold": pathname === site.path,
"text-neutral-500": pathname !== site.path,
})}
>
{site.name}
{site.icon}
<span>{site.name}</span>
</Link>
))}
</nav>

37
packages/reservation-platform/src/components/login-button.tsx Normal file
View File

@@ -0,0 +1,37 @@
"use client";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast";
import { ScanFaceIcon } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
export function LoginButton() {
const { toast } = useToast();
const [isLocked, setLocked] = useState(false);
function onClick() {
if (!isLocked) {
toast({
description: "Du wirst angemeldet...",
});
// Prevent multiple clicks because of login delay...
setLocked(true);
setTimeout(() => {
setLocked(false);
}, 1000 * 5);
}
toast({
description: "Bitte warte einen Moment...",
});
}
return (
<Button onClick={onClick} variant={"ghost"} className="gap-2 flex items-center" asChild disabled={isLocked}>
<Link href="/auth/login">
<ScanFaceIcon className="w-4 h-4" />
<span>Anmelden</span>
</Link>
</Button>
);
}

11
packages/reservation-platform/src/components/logout-button.tsx
View File

@@ -1,12 +1,21 @@
"use client";
import { useToast } from "@/components/ui/use-toast";
import { logout } from "@/server/actions/authentication/logout";
import { LogOutIcon } from "lucide-react";
import Link from "next/link";
export function LogoutButton() {
const { toast } = useToast();
function onClick() {
toast({
description: "Du wirst nun abgemeldet...",
});
logout();
}
return (
<Link href="/" onClick={() => logout()} className="flex items-center gap-2">
<Link href="/" onClick={onClick} className="flex items-center gap-2">
<LogOutIcon className="w-4 h-4" />
<span>Abmelden</span>
</Link>

34
packages/reservation-platform/src/components/printer-card/index.tsx
View File

@@ -33,23 +33,25 @@ export function PrinterCard(props: PrinterCardProps) {
"opacity-50 select-none cursor-not-allowed": status === PrinterStatus.OUT_OF_ORDER,
})}
>
<CardHeader className="flex flex-row justify-between">
<div>
<CardTitle>{printer.name}</CardTitle>
<CardDescription>{printer.description}</CardDescription>
<CardHeader>
<div className="flex flex-row items-start justify-between">
<div>
<CardTitle>{printer.name}</CardTitle>
<CardDescription>{printer.description}</CardDescription>
</div>
<Badge
className={cn({
"bg-green-500 hover:bg-green-400": status === PrinterStatus.IDLE,
"bg-red-500 hover:bg-red-500": status === PrinterStatus.OUT_OF_ORDER,
"bg-yellow-500 hover:bg-yellow-400": status === PrinterStatus.RESERVED,
})}
>
{status === PrinterStatus.RESERVED && <Countdown jobId={printer.printJobs[0].id} />}
<If condition={status === PrinterStatus.RESERVED}>
<Else>{translatePrinterStatus(status)}</Else>
</If>
</Badge>
</div>
<Badge
className={cn({
"bg-green-500 hover:bg-green-400": status === PrinterStatus.IDLE,
"bg-red-500 hover:bg-red-500": status === PrinterStatus.OUT_OF_ORDER,
"bg-yellow-500 hover:bg-yellow-400": status === PrinterStatus.RESERVED,
})}
>
{status === PrinterStatus.RESERVED && <Countdown jobId={printer.printJobs[0].id} />}
<If condition={status === PrinterStatus.RESERVED}>
<Else>{translatePrinterStatus(status)}</Else>
</If>
</Badge>
</CardHeader>
<CardContent className="flex justify-end">
<If condition={status === PrinterStatus.IDLE && userIsLoggedIn && !hasRole(user, UserRole.GUEST)}>