67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import {
|
|
Container,
|
|
HStack,
|
|
Link,
|
|
ThemeSwitch,
|
|
useTheme,
|
|
VStack,
|
|
Text,
|
|
Separator,
|
|
} from '@ermnvldmr/ui';
|
|
import React from 'react';
|
|
|
|
/**
|
|
* Props for the IndexLayout component.
|
|
*/
|
|
export interface IndexLayoutProps {
|
|
/** Main content slot */
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* The root layout for the www service.
|
|
* Handles global theme state and provides common structure.
|
|
*
|
|
* @param props - The component props.
|
|
* @param props.children - Main content slot.
|
|
* @returns A React element representing the index layout.
|
|
* @example
|
|
* ```tsx
|
|
* <IndexLayout>Content</IndexLayout>
|
|
* ```
|
|
*/
|
|
export function IndexLayout({ children }: IndexLayoutProps): React.JSX.Element {
|
|
// Initialize theme side-effects
|
|
useTheme();
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
return (
|
|
<VStack
|
|
align="center"
|
|
className="min-h-screen w-screen bg-[var(--rb-background)] transition-colors duration-200"
|
|
justify="between"
|
|
>
|
|
<VStack align="center" as="main" className="min-h-[105vh] py-8 mx-auto" justify="start">
|
|
{children}
|
|
</VStack>
|
|
<VStack as="footer" className="w-full" gap={0}>
|
|
<Separator thinned="none" />
|
|
<Container className="w-full" padding={12}>
|
|
<HStack align="center" className="w-full" justify="between">
|
|
<VStack align="start" gap={1}>
|
|
<Text color="muted" size="s">
|
|
© {currentYear} Vladimir Eremin
|
|
</Text>
|
|
<Link href="https://creativecommons.org/licenses/by/4.0/" size="s">
|
|
CC-BY 4.0
|
|
</Link>
|
|
</VStack>
|
|
<ThemeSwitch />
|
|
</HStack>
|
|
</Container>
|
|
</VStack>
|
|
</VStack>
|
|
);
|
|
}
|