refactor: improve component formatting in Header, RoomCard, and ThemeSwitcher
This commit is contained in:
parent
e6f84ad95e
commit
096a10b9c1
@ -1,4 +1,4 @@
|
||||
"use client";
|
||||
'use client';
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
@ -9,24 +9,24 @@ import {
|
||||
Navbar,
|
||||
NavbarBrand,
|
||||
NavbarContent,
|
||||
NavbarItem,
|
||||
} from "@nextui-org/react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
|
||||
import { axiosInstance } from "@/app/lib/axios";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
NavbarItem
|
||||
} from '@nextui-org/react';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import { ThemeSwitcher } from '../ThemeSwitcher/ThemeSwitcher';
|
||||
import { axiosInstance } from '@/app/lib/axios';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
const getInitials = (name: string) => {
|
||||
if (!name) return "";
|
||||
if (!name) return '';
|
||||
|
||||
const nameParts = name.split(" ");
|
||||
const nameParts = name.split(' ');
|
||||
if (nameParts.length === 1) {
|
||||
return name;
|
||||
}
|
||||
|
||||
const firstInitial = nameParts[0]?.[0] || "";
|
||||
const secondInitial = nameParts[1]?.[0] || nameParts[0]?.[1] || "";
|
||||
const firstInitial = nameParts[0]?.[0] || '';
|
||||
const secondInitial = nameParts[1]?.[0] || nameParts[0]?.[1] || '';
|
||||
|
||||
return firstInitial + secondInitial;
|
||||
};
|
||||
@ -38,70 +38,76 @@ export const Header = () => {
|
||||
const [userProfile, setUserProfile] = useState<{
|
||||
id: string;
|
||||
username: string;
|
||||
role: "ADMIN" | "STUDENT";
|
||||
role: 'ADMIN' | 'STUDENT';
|
||||
}>();
|
||||
|
||||
const initials = session?.user?.name ? getInitials(session.user.name) : "";
|
||||
const initials = session?.user?.name ? getInitials(session.user.name) : '';
|
||||
|
||||
const fetchUserProfile = async () => {
|
||||
return await axiosInstance<{
|
||||
id: string;
|
||||
username: string;
|
||||
role: "ADMIN" | "STUDENT";
|
||||
}>("/@me");
|
||||
role: 'ADMIN' | 'STUDENT';
|
||||
}>('/@me');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchUserProfile().then((r) => {
|
||||
fetchUserProfile().then(r => {
|
||||
setUserProfile(r.data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Navbar className="mb-2">
|
||||
<Navbar className='mb-2'>
|
||||
<NavbarBrand>
|
||||
<p className="font-bold text-inherit">Toogether</p>
|
||||
<p className='font-bold text-inherit'>Toogether</p>
|
||||
</NavbarBrand>
|
||||
|
||||
<NavbarContent as="div" justify="end">
|
||||
<Dropdown placement="bottom-end">
|
||||
<NavbarContent as='div' justify='end'>
|
||||
{userProfile?.role === 'ADMIN' ? (
|
||||
<NavbarItem>
|
||||
<Button
|
||||
size='sm'
|
||||
variant='flat'
|
||||
className='min-w-0'
|
||||
onPress={() => router.push('/admin')}
|
||||
>
|
||||
🔧
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
) : null}
|
||||
<NavbarItem>
|
||||
<ThemeSwitcher />
|
||||
</NavbarItem>
|
||||
|
||||
<Dropdown placement='bottom-end'>
|
||||
<DropdownTrigger>
|
||||
<Avatar
|
||||
isBordered
|
||||
as="button"
|
||||
className="transition-transform"
|
||||
color="secondary"
|
||||
as='button'
|
||||
className='transition-transform'
|
||||
color='secondary'
|
||||
name={initials}
|
||||
size="sm"
|
||||
size='sm'
|
||||
/>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="Profile Actions" variant="flat">
|
||||
<DropdownItem key="profile" className="h-14 gap-2">
|
||||
<DropdownMenu aria-label='Profile Actions' variant='flat'>
|
||||
<DropdownItem key='profile' className='h-14 gap-2'>
|
||||
<p>Signed in as</p>
|
||||
<p className="font-semibold">
|
||||
<p className='font-semibold'>
|
||||
{session?.user?.name}
|
||||
</p>
|
||||
</DropdownItem>
|
||||
<DropdownItem key="settings">Settings</DropdownItem>
|
||||
<DropdownItem key='settings'>Settings</DropdownItem>
|
||||
<DropdownItem
|
||||
key="logout"
|
||||
color="danger"
|
||||
href="/auth/logout"
|
||||
key='logout'
|
||||
color='danger'
|
||||
href='/auth/logout'
|
||||
>
|
||||
Logout
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<NavbarItem>
|
||||
<ThemeSwitcher />
|
||||
</NavbarItem>
|
||||
{userProfile?.role === "ADMIN" ? (
|
||||
<NavbarItem>
|
||||
<Button onPress={() => router.push("/admin")}>
|
||||
🔧
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
) : null}
|
||||
</NavbarContent>
|
||||
</Navbar>
|
||||
);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { parseDate, Time } from "@internationalized/date";
|
||||
import { parseDate, Time } from '@internationalized/date';
|
||||
|
||||
import {
|
||||
Button,
|
||||
@ -9,70 +9,72 @@ import {
|
||||
CardHeader,
|
||||
DateInput,
|
||||
Divider,
|
||||
TimeInput,
|
||||
} from "@nextui-org/react";
|
||||
import { Room } from "./Room";
|
||||
import moment from "moment";
|
||||
import { useRouter } from "next/navigation";
|
||||
TimeInput
|
||||
} from '@nextui-org/react';
|
||||
import { Room } from './Room';
|
||||
import moment from 'moment';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export const RoomCard = ({ id, name, date, Times, Presentator }: Room) => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<Card className="w-[300px]">
|
||||
<Card className='w-[300px]'>
|
||||
<CardHeader>
|
||||
<div className="flex flex-col min-h-20">
|
||||
<p className="text-md">{name}</p>
|
||||
<p className="text-small text-default-500">
|
||||
<div className='flex flex-col min-h-20'>
|
||||
<p className='text-md'>{name}</p>
|
||||
<p className='text-small text-default-500'>
|
||||
{Presentator.username}
|
||||
</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<Divider />
|
||||
<CardBody>
|
||||
{Times.map((time) => (
|
||||
<div className="flex flex-col gap-2" key={`${time.id}`}>
|
||||
<DateInput
|
||||
isReadOnly
|
||||
label="Date"
|
||||
value={parseDate(moment(date).format("YYYY-MM-DD"))}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<TimeInput
|
||||
isReadOnly
|
||||
label="Start"
|
||||
hourCycle={24}
|
||||
value={
|
||||
new Time(
|
||||
moment(time.startTime).hours(),
|
||||
moment(time.startTime).minutes(),
|
||||
)
|
||||
}
|
||||
/>
|
||||
<span>-</span>
|
||||
<TimeInput
|
||||
isReadOnly
|
||||
label="End"
|
||||
hourCycle={24}
|
||||
value={
|
||||
new Time(
|
||||
moment(time.endTime).hours(),
|
||||
moment(time.endTime).minutes(),
|
||||
)
|
||||
}
|
||||
/>
|
||||
<div className='flex flex-col gap-2' key={`times.${id}`}>
|
||||
<DateInput
|
||||
isReadOnly
|
||||
label='Date'
|
||||
value={parseDate(moment(date).format('YYYY-MM-DD'))}
|
||||
/>
|
||||
{Times.map(time => (
|
||||
<div key={`time.${time.id}`}>
|
||||
<div className='flex items-center gap-2'>
|
||||
<TimeInput
|
||||
isReadOnly
|
||||
label='Start'
|
||||
hourCycle={24}
|
||||
value={
|
||||
new Time(
|
||||
moment(time.startTime).hours(),
|
||||
moment(time.startTime).minutes()
|
||||
)
|
||||
}
|
||||
/>
|
||||
<span>-</span>
|
||||
<TimeInput
|
||||
isReadOnly
|
||||
label='End'
|
||||
hourCycle={24}
|
||||
value={
|
||||
new Time(
|
||||
moment(time.endTime).hours(),
|
||||
moment(time.endTime).minutes()
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</CardBody>
|
||||
{moment(date).dayOfYear() === moment().dayOfYear() && (
|
||||
<div className="flex p-2">
|
||||
<div className='flex p-2'>
|
||||
<Button
|
||||
className={""}
|
||||
color="primary"
|
||||
radius="full"
|
||||
size="sm"
|
||||
variant={"flat"}
|
||||
className={''}
|
||||
color='primary'
|
||||
radius='full'
|
||||
size='sm'
|
||||
variant={'flat'}
|
||||
onPress={() => {
|
||||
router.push(`/room/${id}`);
|
||||
}}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
import { Button } from "@nextui-org/react";
|
||||
import { useTheme } from "next-themes";
|
||||
import { useEffect, useState } from "react";
|
||||
'use client';
|
||||
import { Button } from '@nextui-org/react';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export const ThemeSwitcher = () => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
@ -14,8 +14,13 @@ export const ThemeSwitcher = () => {
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<Button onPress={() => setTheme(theme === "light" ? "dark" : "light")}>
|
||||
{theme === "light" ? "🌑" : "☀️"}
|
||||
<Button
|
||||
size='sm'
|
||||
variant='flat'
|
||||
className='min-w-0'
|
||||
onPress={() => setTheme(theme === 'light' ? 'dark' : 'light')}
|
||||
>
|
||||
{theme === 'light' ? '🌑' : '☀️'}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user