Improved Sidebar styling
This commit is contained in:
parent
f88f783de9
commit
6cd95fa0e4
@ -1,124 +1,128 @@
|
||||
import React, { Dispatch, SetStateAction, useEffect, useRef } from "react";
|
||||
import { TbHexagon } from "react-icons/tb";
|
||||
import GeologicalEvent from "@appTypes/Event";
|
||||
import GeologicalEvent from "@appTypes/GeologicalEvent";
|
||||
import getMagnitudeColor from "@utils/getMagnitudeColour";
|
||||
interface SidebarProps {
|
||||
logTitle: string;
|
||||
logSubtitle: string;
|
||||
recentsTitle: string;
|
||||
events: GeologicalEvent[];
|
||||
selectedEventId: GeologicalEvent["id"];
|
||||
setSelectedEventId: Dispatch<SetStateAction<string>>;
|
||||
hoveredEventId: GeologicalEvent["id"];
|
||||
setHoveredEventId: Dispatch<SetStateAction<string>>;
|
||||
button1Name: string;
|
||||
button2Name: string;
|
||||
onButton2Click?: () => void;
|
||||
onButton1Click?: () => void;
|
||||
button1Disabled?: boolean;
|
||||
logTitle: string;
|
||||
logSubtitle: string;
|
||||
recentsTitle: string;
|
||||
events: GeologicalEvent[];
|
||||
selectedEventId: GeologicalEvent["id"];
|
||||
setSelectedEventId: Dispatch<SetStateAction<string>>;
|
||||
hoveredEventId: GeologicalEvent["id"];
|
||||
setHoveredEventId: Dispatch<SetStateAction<string>>;
|
||||
button1Name: string;
|
||||
button2Name: string;
|
||||
onButton2Click?: () => void;
|
||||
onButton1Click?: () => void;
|
||||
button1Disabled?: boolean;
|
||||
}
|
||||
|
||||
function MagnitudeNumber({ magnitude }: { magnitude: number }) {
|
||||
const magnitudeStr = magnitude.toFixed(1);
|
||||
const [whole, decimal] = magnitudeStr.split(".");
|
||||
return (
|
||||
<div className="relative" style={{ color: getMagnitudeColor(magnitude) }}>
|
||||
<TbHexagon size={40} className="drop-shadow-sm" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="flex items-baseline font-mono font-bold tracking-tight">
|
||||
<span className="text-xl -mr-1">{whole}</span>
|
||||
<span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span>
|
||||
<span className="text-xs -mr-[1px]">{decimal}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const magnitudeStr = magnitude.toFixed(1);
|
||||
const [whole, decimal] = magnitudeStr.split(".");
|
||||
return (
|
||||
<div className="relative" style={{ color: getMagnitudeColor(magnitude) }}>
|
||||
<TbHexagon size={40} className="drop-shadow-sm" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="flex items-baseline font-mono font-bold tracking-tight">
|
||||
<span className="text-xl -mr-1">{whole}</span>
|
||||
<span className="text-xs ml-[1.5px] -mr-[2.5px]">.</span>
|
||||
<span className="text-xs -mr-[1px]">{decimal}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Sidebar({
|
||||
logTitle,
|
||||
logSubtitle,
|
||||
recentsTitle,
|
||||
events,
|
||||
selectedEventId,
|
||||
setSelectedEventId,
|
||||
hoveredEventId,
|
||||
setHoveredEventId,
|
||||
button1Name,
|
||||
button2Name,
|
||||
onButton2Click,
|
||||
onButton1Click,
|
||||
button1Disabled = false,
|
||||
logTitle,
|
||||
logSubtitle,
|
||||
recentsTitle,
|
||||
events,
|
||||
selectedEventId,
|
||||
setSelectedEventId,
|
||||
hoveredEventId,
|
||||
setHoveredEventId,
|
||||
button1Name,
|
||||
button2Name,
|
||||
onButton2Click,
|
||||
onButton1Click,
|
||||
button1Disabled = false,
|
||||
}: SidebarProps) {
|
||||
const eventsContainerRef = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
if (selectedEventId && eventsContainerRef.current) {
|
||||
const selectedEventElement = eventsContainerRef.current.querySelector(`[data-event-id="${selectedEventId}"]`);
|
||||
if (selectedEventElement) {
|
||||
selectedEventElement.scrollIntoView({
|
||||
block: "center",
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [selectedEventId]);
|
||||
const eventsContainerRef = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
if (selectedEventId && eventsContainerRef.current) {
|
||||
const selectedEventElement = eventsContainerRef.current.querySelector(`[data-event-id="${selectedEventId}"]`);
|
||||
if (selectedEventElement) {
|
||||
selectedEventElement.scrollIntoView({
|
||||
block: "center",
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [selectedEventId]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full w-80 bg-gradient-to-b from-neutral-100 to-neutral-50 shadow-lg">
|
||||
<div className="py-6 flex flex-col h-full">
|
||||
<div className="px-6 pb-8 border-b border-neutral-200">
|
||||
<h2 className="text-2xl font-bold text-neutral-800 mb-2">{logTitle}</h2>
|
||||
<p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p>
|
||||
<button
|
||||
className={`mt-4 w-full py-2 px-4 rounded-lg transition-colors duration-200 font-medium
|
||||
${button1Disabled
|
||||
? "bg-gray-300 text-gray-500 cursor-not-allowed"
|
||||
: "bg-blue-600 hover:bg-blue-700 text-white"
|
||||
}`}
|
||||
onClick={onButton1Click}
|
||||
type="button"
|
||||
|
||||
tabIndex={button1Disabled ? -1 : 0}
|
||||
aria-disabled={button1Disabled ? "true" : "false"}
|
||||
>
|
||||
{button1Name}
|
||||
</button>
|
||||
<button
|
||||
className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium"
|
||||
onClick={onButton2Click}
|
||||
type="button"
|
||||
>
|
||||
{button2Name}
|
||||
</button>
|
||||
</div>
|
||||
<div className="px-6 pt-6">
|
||||
<h2 className="text-xl font-bold text-neutral-800 mb-4">{recentsTitle}</h2>
|
||||
</div>
|
||||
<div className="flex-1 px-6 overflow-y-auto" ref={eventsContainerRef}>
|
||||
<div className="space-y-3">
|
||||
{events.map((event) => (
|
||||
<button
|
||||
key={event.id}
|
||||
data-event-id={event.id}
|
||||
className={`w-full border ${hoveredEventId === event.id ? "bg-neutral-100" : "bg-white"} ${
|
||||
selectedEventId === event.id ? "border-neutral-800" : "border-neutral-200"
|
||||
} rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150 shadow-sm text-left`}
|
||||
onClick={() => {
|
||||
setSelectedEventId((prevEventId) => (prevEventId !== event.id ? event.id : ""));
|
||||
}}
|
||||
onMouseEnter={() => setHoveredEventId(event.id)}
|
||||
onMouseLeave={() => setHoveredEventId("")}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-neutral-800 line-clamp-1">{event.title}</p>
|
||||
<p className="text-xs text-neutral-500 mt-1 line-clamp-1">{event.text2}</p>
|
||||
</div>
|
||||
{event.magnitude ? <MagnitudeNumber magnitude={event.magnitude} /> : <></>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="flex flex-col h-full w-80 bg-gradient-to-b from-neutral-100 to-neutral-50 shadow-lg">
|
||||
<div className="py-6 flex flex-col h-full">
|
||||
<div className="px-6 pb-8 border-b border-neutral-200">
|
||||
<h2 className="text-2xl font-bold text-neutral-800 mb-2">{logTitle}</h2>
|
||||
<p className="text-sm text-neutral-600 leading-relaxed">{logSubtitle}</p>
|
||||
<button
|
||||
className={`mt-4 w-full py-2 px-4 rounded-lg transition-colors duration-200 font-medium
|
||||
${
|
||||
button1Disabled
|
||||
? "bg-gray-300 text-gray-500 cursor-not-allowed"
|
||||
: "bg-blue-600 hover:bg-blue-700 text-white"
|
||||
}`}
|
||||
onClick={onButton1Click}
|
||||
type="button"
|
||||
tabIndex={button1Disabled ? -1 : 0}
|
||||
aria-disabled={button1Disabled ? "true" : "false"}
|
||||
>
|
||||
{button1Name}
|
||||
</button>
|
||||
<button
|
||||
className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors duration-200 font-medium"
|
||||
onClick={onButton2Click}
|
||||
type="button"
|
||||
>
|
||||
{button2Name}
|
||||
</button>
|
||||
</div>
|
||||
<div className="px-6 pt-6">
|
||||
<h2 className="text-xl font-bold text-neutral-800 mb-4">{recentsTitle}</h2>
|
||||
</div>
|
||||
<div className="flex-1 px-6 overflow-y-auto" ref={eventsContainerRef}>
|
||||
<div className="space-y-3">
|
||||
{events.map((event) => (
|
||||
<button
|
||||
key={event.id}
|
||||
data-event-id={event.id}
|
||||
className={`w-full border ${
|
||||
selectedEventId === event.id
|
||||
? "border-neutral-500 border-2 shadow-md"
|
||||
: hoveredEventId === event.id
|
||||
? "bg-neutral-100 shadow-sm"
|
||||
: "bg-white border-neutral-200 shadow-sm"
|
||||
} rounded-lg p-4 flex items-center gap-4 hover:bg-neutral-100 transition-colors duration-150 text-left`}
|
||||
onClick={() => {
|
||||
setSelectedEventId((prevEventId) => (prevEventId !== event.id ? event.id : ""));
|
||||
}}
|
||||
onMouseEnter={() => setHoveredEventId(event.id)}
|
||||
onMouseLeave={() => setHoveredEventId("")}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-neutral-800 line-clamp-1">{event.title}</p>
|
||||
<p className="text-xs text-neutral-500 mt-1 line-clamp-1">{event.text2}</p>
|
||||
</div>
|
||||
{event.magnitude ? <MagnitudeNumber magnitude={event.magnitude} /> : <></>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user