forked from mirrors/thatmattlove-hyperglass
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { Accordion } from '@chakra-ui/react';
|
|
import { AnimatePresence } from 'framer-motion';
|
|
import { AnimatedDiv } from '~/components';
|
|
import { useDevice, useLGState } from '~/hooks';
|
|
import { Result } from './individual';
|
|
import { Tags } from './tags';
|
|
|
|
export const Results: React.FC = () => {
|
|
const { queryLocation, queryTarget, queryType, queryVrf, queryGroup } = useLGState();
|
|
|
|
const getDevice = useDevice();
|
|
|
|
// Scroll to the top of the page when results load - primarily for mobile.
|
|
useEffect(() => {
|
|
if (typeof window !== 'undefined') {
|
|
window.scrollTo(0, 0);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Tags />
|
|
<AnimatedDiv
|
|
p={0}
|
|
my={4}
|
|
w="100%"
|
|
mx="auto"
|
|
rounded="lg"
|
|
textAlign="left"
|
|
borderWidth="1px"
|
|
overflow="hidden"
|
|
initial={{ opacity: 1 }}
|
|
exit={{ opacity: 0, y: 300 }}
|
|
transition={{ duration: 0.3 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
maxW={{ base: '100%', md: '75%' }}
|
|
>
|
|
<Accordion allowMultiple allowToggle>
|
|
<AnimatePresence>
|
|
{queryLocation.value &&
|
|
queryLocation.map((loc, i) => {
|
|
const device = getDevice(loc.value);
|
|
return (
|
|
<Result
|
|
index={i}
|
|
device={device}
|
|
key={device._id}
|
|
queryLocation={loc.value}
|
|
queryVrf={queryVrf.value}
|
|
queryType={queryType.value}
|
|
queryGroup={queryGroup.value}
|
|
queryTarget={queryTarget.value}
|
|
/>
|
|
);
|
|
})}
|
|
</AnimatePresence>
|
|
</Accordion>
|
|
</AnimatedDiv>
|
|
</>
|
|
);
|
|
};
|