Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Set container width by device type
  • Loading branch information
regalijan committed Oct 19, 2023
1 parent 4409b29 commit 491d484
Showing 1 changed file with 16 additions and 7 deletions.
23 changes: 16 additions & 7 deletions app/routes/mod-queue.tsx
Expand Up @@ -67,14 +67,24 @@ export async function loader({ context }: { context: RequestContext }) {
};
}

export function meta() {
return {
title: "Moderation Queue - Car Crushers",
};
}

export default function () {
const pageProps = useLoaderData<typeof loader>();
const isDesktop = useBreakpointValue({ base: false, lg: true });
const entryTypes = [];
const [entries, setEntries] = useState([] as JSX.Element[]);

for (const type of pageProps.entry_types)
entryTypes.push(<option value={type.value}>{type.name}</option>);
entryTypes.push(
<option key={type.value} value={type.value}>
{type.name}
</option>
);

async function updateQueue(
queue_type: string,
Expand Down Expand Up @@ -126,12 +136,11 @@ export default function () {
return (
<Container maxW="container.lg">
<Flex>
<VStack w="container.md">{entries}</VStack>
<Box display={isDesktop ? undefined : "none"} w="256px">
<Select placeholder="Entry Type">
<option value="">All</option>
{entryTypes}
</Select>
<VStack w={isDesktop ? "container.md" : "container.lg"}>
{entries}
</VStack>
<Box display={isDesktop ? undefined : "none"} ml="16px" w="248px">
<Select>{entryTypes}</Select>
</Box>
</Flex>
</Container>
Expand Down

0 comments on commit 491d484

Please sign in to comment.