pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use class helper instead of component to handle responsiveness

Browse Source
This commit is contained in:
Pihkaal
2024-08-22 18:18:21 +02:00
parent 03d90db620
commit dd6c5faa5a
6 changed files with 77 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Music/index.tsx
View File

@@ -4,12 +4,12 @@ import { Kitty } from "../Kitty";
import { SpotifyPlayer } from "./SpotifyPlayer";
import { Cava } from "./Cava";
import { useApp } from "~/hooks/useApp";
import { Responsive } from "../Responsive";
import { cn, hideIf } from "~/utils/react";
const song = "/audio/asinine-vivement-quoi.mp3";
export const Music = () => {
const { volume } = useApp();
const { volume, screenWidth } = useApp();
const audio = useRef<HTMLAudioElement>(null);
@@ -55,7 +55,13 @@ export const Music = () => {
<audio ref={audio} src={song} onTimeUpdate={handleTimeUpdate} loop />
{audio.current && metadata ? (
<>
<Kitty className="h-full w-1/2 pb-2 pl-2 pr-1 pt-1" rows={5}>
<Kitty
className={cn(
"h-full pb-2 pl-2 pr-1 pt-1",
screenWidth < 900 ? "w-full" : "w-1/2",
)}
rows={5}
>
<SpotifyPlayer
title={metadata.common.title ?? "Unknown"}
artist={metadata.common.artist ?? "Unknown"}
@@ -66,7 +72,13 @@ export const Music = () => {
/>
</Kitty>
<Kitty className="h-full w-1/2 pb-2 pl-1 pr-2 pt-1" rows={5}>
<Kitty
className={cn(
"h-full w-1/2 pb-2 pl-1 pr-2 pt-1",
hideIf(screenWidth < 900),
)}
rows={5}
>
<Cava audio={audio} />
</Kitty>
</>

31
src/components/Responsive.tsx
View File

@@ -1,31 +0,0 @@
import { useState, type ReactNode, useEffect } from "react";
import { cn } from "~/utils/react";
export const Responsive = (props: {
className?: string;
minScreenWidth?: number;
children: ReactNode;
}) => {
const [hidden, setHidden] = useState(false);
useEffect(() => {
if (!props.minScreenWidth) return;
const handleResize = () => {
setHidden(
props.minScreenWidth !== undefined &&
window.innerWidth < props.minScreenWidth,
);
};
window.addEventListener("resize", handleResize);
handleResize();
return () => {
window.removeEventListener("resize", handleResize);
};
}, [props.minScreenWidth]);
return hidden ? null : props.children;
};

94
src/components/Waybar/index.tsx
View File

@@ -17,8 +17,12 @@ import { WaybarTrayWidget } from "./Widgets/WaybarTrayWidget";
import { WaybarToggleThemeWidget } from "./Widgets/WaybarToggleThemeWidget";
import { WaybarWeatherWidget } from "./Widgets/WaybarWeatherWidget";
import { Responsive } from "../Responsive";
import { cn, hideIf } from "~/utils/react";
import { useApp } from "~/hooks/useApp";
export const Waybar = () => {
const { screenWidth } = useApp();
return (
<div className="grid h-[37px] w-full select-none grid-cols-[1fr_max-content_1fr] grid-rows-1 gap-0">
<div className="flex items-center gap-3">
@@ -26,32 +30,28 @@ export const Waybar = () => {
<WaybarHomeWidget />
</WaybarWidgetGroup>
<Responsive minScreenWidth={705}>
<WaybarWidgetGroup>
<WaybarCPUWidget
variation={1}
frequency={3250 + randomMinMax(-100, 100)}
cores={12}
min={8}
max={16}
/>
<WaybarRAMWidget
variation={1}
frequency={5000 + randomMinMax(-100, 100)}
min={18}
max={40}
start={randomMinMax(20, 30)}
capacity={16}
/>
<WaybarDiskWidget current={35.9} variation={4.1} capacity={160.3} />
</WaybarWidgetGroup>
</Responsive>
<WaybarWidgetGroup className={cn(hideIf(screenWidth < 705))}>
<WaybarCPUWidget
variation={1}
frequency={3250 + randomMinMax(-100, 100)}
cores={12}
min={8}
max={16}
/>
<WaybarRAMWidget
variation={1}
frequency={5000 + randomMinMax(-100, 100)}
min={18}
max={40}
start={randomMinMax(20, 30)}
capacity={16}
/>
<WaybarDiskWidget current={35.9} variation={4.1} capacity={160.3} />
</WaybarWidgetGroup>
<Responsive minScreenWidth={910}>
<WaybarWidgetGroup>
<WaybarTitleWidget />
</WaybarWidgetGroup>
</Responsive>
<WaybarWidgetGroup className={cn(hideIf(screenWidth < 910))}>
<WaybarTitleWidget />
</WaybarWidgetGroup>
</div>
<div className="flex items-center">
<WaybarWidgetGroup>
@@ -61,34 +61,28 @@ export const Waybar = () => {
</WaybarWidgetGroup>
</div>
<div className="flex items-center justify-end gap-2">
<Responsive minScreenWidth={1320}>
<WaybarWidgetGroup>
<WaybarTemperatureWidget
min={50}
max={70}
variation={1}
frequency={7000 + randomMinMax(-100, 100)}
/>
<WaybarWidgetGroup className={cn(hideIf(screenWidth < 1320))}>
<WaybarTemperatureWidget
min={50}
max={70}
variation={1}
frequency={7000 + randomMinMax(-100, 100)}
/>
<WaybarBatteryWidget frequency={7000 + randomMinMax(-100, 100)} />
</WaybarWidgetGroup>
</Responsive>
<WaybarBatteryWidget frequency={7000 + randomMinMax(-100, 100)} />
</WaybarWidgetGroup>
<Responsive minScreenWidth={970}>
<WaybarWidgetGroup>
<WaybarBrightnessWidget />
<WaybarVolumeWidget />
<WaybarMicrophoneWidget />
</WaybarWidgetGroup>
</Responsive>
<WaybarWidgetGroup className={cn(hideIf(screenWidth < 970))}>
<WaybarBrightnessWidget />
<WaybarVolumeWidget />
<WaybarMicrophoneWidget />
</WaybarWidgetGroup>
<Responsive minScreenWidth={475}>
<WaybarWidgetGroup>
<WaybarTrayWidget />
<WaybarWeatherWidget />
<WaybarToggleThemeWidget />
</WaybarWidgetGroup>
</Responsive>
<WaybarWidgetGroup className={cn(hideIf(screenWidth < 475))}>
<WaybarTrayWidget />
<WaybarWeatherWidget />
<WaybarToggleThemeWidget />
</WaybarWidgetGroup>
</div>
</div>
);