Skip to content

Commit

Permalink
test collapsible panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@gv2325
gv2325 committed Sep 18, 2024
1 parent 7347250 commit 7e929b6
Showing 1 changed file with 52 additions and 101 deletions.
153 changes: 52 additions & 101 deletions src/components/Panel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,21 @@ const StyledTabList = styled(TabList)`
}
`;

const ToggleButton = styled.button`
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
margin: 0.5rem;
&:focus {
outline: none;
}
@media (max-width: 768px) {
padding: 1rem;
margin: 0.25rem;
}
`;

export default function Panel() {
const { isPlaying, playVideo, pauseVideo } = useContext(VideoContext);
const { mapView } = useContext(MapViewContext);
Expand All @@ -32,6 +47,7 @@ export default function Panel() {
const { chartData } = useContext(ChartDataContext);

const [selectedIndex, setSelectedIndex] = useState(0);
const [isCollapsed, setIsCollapsed] = useState(false);

const handlePlayPause = () => {
if (isPlaying) {
Expand Down Expand Up @@ -65,110 +81,45 @@ export default function Panel() {
};

useEffect(() => {
if (mapView) {
const initialLayer = config[0];
changeLayer(initialLayer, 0);
}
}, [mapView]);

const getMaxValuesForYears = useMemo(() => {
const years = [2000, 2025, 2050, 2075, 2100];
const selectedVariable = selectedIndex === 0 ? 'heatmax_ssp126' : selectedIndex === 1 ? 'heatmax_ssp245' : 'heatmax_ssp370';

return years.map((year) => {
const dataForYear = chartData.find(data => data.x === String(year));
return dataForYear ? Math.round(dataForYear[selectedVariable]) : 'N/A';
});
}, [chartData, selectedIndex]);

// Add any necessary effect logic here
}, []);

return (
<div className='fixed bottom-0 left-1/2 transform -translate-x-1/2 shadow-lg backdrop-blur-lg z-10 flex
w-full gap-[20px] lg:w-[762px] lg:left-1/2 lg:-translate-x-1/2 lg:gap-[60px]'>
<TabGroup style={{ width: '100%', height: '100%'}} defaultIndex={selectedIndex} onChange={setSelectedIndex}>
<StyledTabList className="absolute left-1/2 transform -translate-x-1/2 -top-16 text-white p-2 flex space-x-4 overflow-x-auto whitespace-nowrap">
{config.map((dataset, index) => (
<Tab
key={dataset.name}
className={({ selected }) =>
`px-4 py-2 text-xs rounded-sm focus:outline-none ${
selected ? 'bg-blue-600 text-white' : 'bg-black bg-opacity-90 text-white'
}`
}
onClick={() => changeLayer(dataset, index)}
>
{dataset.name}
</Tab>
))}
</StyledTabList>

<TabPanels style={{ height: '350px' }}>
{config.map((dataset, index) => (
<TabPanel style={{ height: '100%' }} key={index}>
<div className="flex flex-col w-full h-full rounded-t-xl bg-black bg-opacity-70 shadow-lg backdrop-blur-lg p-6 gap-[20px] lg:gap-[20px]">

<div className="flex justify-between items-center w-full">
<h2 className="text-white text-2xl">Heat Index</h2>

<div className="absolute left-1/2 transform -translate-x-1/2 flex gap-4">
<div className="bg-transparent text-white text-xl cursor-pointer">
<BackwardIcon className="h-6 w-6 text-white" />
</div>

<div className="bg-transparent text-white text-xl cursor-pointer" onClick={handlePlayPause}>
{isPlaying ? (
<PauseIcon className="h-6 w-6 text-white" />
) : (
<PlayIcon className="h-6 w-6 text-white" />
)}
</div>

<div className="bg-transparent text-white text-xl cursor-pointer">
<ForwardIcon className="h-6 w-6 text-white" />
</div>
</div>
</div>

<div className="flex items-center justify-start w-full gap-4 relative">
<span className="text-white text-lg">°C</span>

<Switch
checked={isFahrenheit}
onChange={setIsFahrenheit}
className={`${
isFahrenheit ? 'bg-blue-600' : 'bg-gray-400'
} relative inline-flex items-center h-6 rounded-full w-11`}
>
<span
className={`${
isFahrenheit ? 'translate-x-6' : 'translate-x-1'
} inline-block w-4 h-4 transform bg-white rounded-full transition`}
/>
</Switch>

<span className="text-white text-lg">°F</span>

<div className="flex w-full justify-between relative ml-8">
{getMaxValuesForYears.map((value, idx) => (
<div key={idx} className="relative text-white text-xl" style={{ position: 'absolute', top: '-15px', left: `${12 + idx * 19}%` }}>
{value === 'N/A' ? (
<div className="w-16 h-6 bg-neutral-950 bg-opacity-90 rounded animate-pulse"></div>
) : (
<span>{value} {isFahrenheit ? '°F' : '°C'}</span>
)}
</div>
))}
</div>
</div>

<div className="w-full h-[200px] overflow-y-auto">
<LineChart selectedIndex={selectedIndex} />
</div>
</div>
<div>
<ToggleButton onClick={() => setIsCollapsed(!isCollapsed)}>
{isCollapsed ? 'Expand' : 'Collapse'}
</ToggleButton>
{!isCollapsed && (
<>
<StyledTabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
<Tab>Tab 3</Tab>
</StyledTabList>
<TabPanels>
<TabPanel>
<LineChart data={chartData} />
</TabPanel>
<TabPanel>
<div>Content for Tab 2</div>
</TabPanel>
<TabPanel>
<div>Content for Tab 3</div>
</TabPanel>
))}
</TabPanels>
</TabGroup>
</TabPanels>
<div>
<button onClick={handlePlayPause}>
{isPlaying ? <PauseIcon /> : <PlayIcon />}
</button>
<button>
<BackwardIcon />
</button>
<button>
<ForwardIcon />
</button>
</div>
</>
)}
</div>
);
}

0 comments on commit 7e929b6

Please sign in to comment.