mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.5 KiB
48 lines
1.5 KiB
import React from 'react';
|
|
import { Box, Flex, Stack, space, BoxProps } from '@stacks/ui';
|
|
import { H1 } from '@components/mdx';
|
|
import { Text } from '@components/typography';
|
|
import { useRouter } from 'next/router';
|
|
import dynamic from 'next/dynamic';
|
|
import { getTitle } from '@common/utils';
|
|
import { css } from '@stacks/ui-core';
|
|
import { getHeadingStyles } from '@components/mdx/typography';
|
|
const Search = dynamic(() => import('@components/search'));
|
|
import { PageMeta } from '@components/page-meta';
|
|
|
|
interface PageTopProps extends BoxProps {
|
|
description?: string;
|
|
duration?: string;
|
|
experience?: 'beginners' | 'intermediate' | 'advanced';
|
|
title?: string;
|
|
headings?: any[];
|
|
}
|
|
export const PageTop: React.FC<PageTopProps> = React.memo(
|
|
({ description, experience, duration, title, headings, ...rest }) => {
|
|
const router = useRouter();
|
|
const isHome = router?.pathname === '/';
|
|
return (
|
|
<Box as="section" mb="64px" {...rest}>
|
|
<Flex>
|
|
<H1 mb="0 !important">
|
|
{getTitle({
|
|
title,
|
|
headings,
|
|
})}
|
|
</H1>
|
|
{isHome ? (
|
|
<Box width="100%" maxWidth="208px">
|
|
<Search />
|
|
</Box>
|
|
) : null}
|
|
</Flex>
|
|
{description ? (
|
|
<Box mt="40px !important">
|
|
<Text {...getHeadingStyles('h4')}>{description}</Text>
|
|
</Box>
|
|
) : null}
|
|
<PageMeta duration={duration} experience={experience} isHome={isHome} />
|
|
</Box>
|
|
);
|
|
}
|
|
);
|
|
|