5UP3RB/actaeon
1
0
Fork 0
forked from sk1982/actaeon
Code Pull Requests Activity

chuni: show rating when resizing

Browse Source
This commit is contained in:
sk1982 2024-03-12 07:12:21 -04:00
parent 1ace096da2
commit 55babd1dbf
2 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/chuni/top-rating-sidebar.tsx
View File

@ -4,9 +4,14 @@ import { ChuniTopRating, ChuniTopRatingProps } from '@/components/chuni/top-rati
import { getUserRating } from '@/actions/chuni/profile';
import { useState } from 'react';
import { Button, ButtonGroup } from '@nextui-org/react';
import { useBreakpoint } from '@/helpers/use-breakpoint';
export const ChuniTopRatingSidebar = ({ rating }: { rating: Awaited<ReturnType<typeof getUserRating>> }) => {
const [shownRating, setShownRating] = useState<'top' | 'recent' | null>('recent');
const breakpoint = useBreakpoint();
if (![undefined, 'sm'].includes(breakpoint) && shownRating === null)
setShownRating('recent');
return (<div className="w-full mt-4 md:mt-0 px-2 sm:px-0 md:fixed md:overflow-y-auto h-fixed flex md:w-[16rem] 2xl:w-[32rem]">
<div className="hidden 2xl:flex">

18
src/helpers/use-breakpoint.ts Normal file
View File

@ -0,0 +1,18 @@
import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '@/../tailwind.base';
import { useMediaQuery } from 'usehooks-ts';
const config = resolveConfig(tailwindConfig);
const breakpoints = Object.entries(config.theme.screens)
.sort(([, a], [, b]) => parseInt(a) - parseInt(b));
export const useBreakpoint = () => {
let activeName: string | undefined;
for (const [name, width] of breakpoints) {
// eslint-disable-next-line react-hooks/rules-of-hooks
if (useMediaQuery(`(min-width: ${width})`))
activeName = name;
}
return activeName;
};