ktl-657 feat: layout for Community Pages

LiYing2010 · Apr 14, 2022 · 0c2ca57 · 0c2ca57
1 parent ad82917
commit 0c2ca57
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 62 deletions.
diff --git a/components/layout/community-layout.tsx b/components/layout/community-layout.tsx
@@ -0,0 +1,82 @@
+import React, {FC, useCallback, useMemo, useState} from "react";
+
+import Head from "next/head";
+
+import GlobalHeader, {COMMUNITY_TITLE, COMMUNITY_URL} from '@jetbrains/kotlin-web-site-ui/out/components/header';
+import GlobalFooter from '@jetbrains/kotlin-web-site-ui/out/components/footer';
+import TopMenu from '@jetbrains/kotlin-web-site-ui/out/components/top-menu';
+import CtaBlock from '@jetbrains/kotlin-web-site-ui/out/components/cta-block';
+import Button from "@rescui/button";
+import {Theme, ThemeProvider } from "@rescui/ui-contexts";
+import { useRouter } from "next/router";
+
+const items = [
+    {
+        url: '/community',
+        title: 'Overview',
+    },
+    {
+        url: '/community/user-groups',
+        title: 'Kotlin User Groups',
+    },
+    {
+        url: '/community/events',
+        title: 'Events',
+    },
+];
+
+interface CommunityLayoutProps {
+    title: string;
+    children: React.ReactNode;
+}
+
+export const CommunityLayout: FC<CommunityLayoutProps> = ({title, children}) => {
+    const [theme, setTheme] = useState<Theme>('dark');
+    const router = useRouter();
+    const activeIndex = useMemo(() => items.map(item => item.url).indexOf(router.pathname), [router.pathname]);
+    const linkHandler = useCallback((event, url) => {
+        event.preventDefault();
+        router.push(url);
+    }, []);
+
+    return (
+        <>
+            <Head>
+                <title>{title}</title>
+            </Head>
+
+            <GlobalHeader
+                currentUrl={COMMUNITY_URL}
+                currentTitle={COMMUNITY_TITLE}
+                productWebUrl={''}
+                hasSearch={true}
+                onSearchClick={() => {}}
+            />
+
+            <TopMenu
+                homeUrl={COMMUNITY_URL}
+                title={COMMUNITY_TITLE}
+                activeIndex={activeIndex}
+                items={items}
+                linkHandler={linkHandler}
+            />
+
+            {children}
+
+            <CtaBlock
+                topTitle={"Help us improve"}
+                buttons={
+                    <Button size="l" mode="rock" href="mailto:[email protected]">Write to us</Button>
+                }
+            >
+                <div className={"ktl-hero ktl-hero_theme_dark"}>Give us your feedback or ask any questions<br/>
+                    you have about the Kotlin community
+                </div>
+            </CtaBlock>
+
+            <ThemeProvider theme={theme}>
+                <GlobalFooter/>
+            </ThemeProvider>
+        </>
+    );
+}
diff --git a/pages/community/events.tsx b/pages/community/events.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import {CommunityLayout} from "../../components/layout/community-layout";
+
+function UserGroups() {
+    return (
+        <CommunityLayout title={"Community Events"}>
+            <div className={"ktl-container"}>
+                <h1 className={"ktl-h1"}>Community Events</h1>
+            </div>
+        </CommunityLayout>
+    );
+}
+
+export default UserGroups;
diff --git a/pages/community/index.tsx b/pages/community/index.tsx
@@ -1,77 +1,19 @@
-import React, {useState} from "react";
+import React from "react";
 
-import GlobalHeader from '@jetbrains/kotlin-web-site-ui/out/components/header';
-import GlobalFooter from '@jetbrains/kotlin-web-site-ui/out/components/footer';
-import TopMenu from '@jetbrains/kotlin-web-site-ui/out/components/top-menu';
-import CtaBlock from '@jetbrains/kotlin-web-site-ui/out/components/cta-block';
-import Button from "@rescui/button";
-
-import {useTextStyles} from '@rescui/typography';
-import {Theme, ThemeProvider} from "@rescui/ui-contexts";
 import {CommunityBanner} from '../../components/community-banner/community-banner';
-import Head from 'next/head';
-
-const items = [
-    {
-        url: '/',
-        title: 'Overview',
-    },
-    {
-        url: '/user-groups',
-        title: 'Kotlin User Groups',
-    },
-    {
-        url: '/events',
-        title: 'Events',
-    },
-];
+import {CommunityLayout} from "../../components/layout/community-layout";
 
 function Index() {
-    const textCn = useTextStyles();
-    const [theme, setTheme] = useState<Theme>('dark');
-
     return (
-        <div>
-            <Head>
-                <title>Community</title>
-            </Head>
-
-            <GlobalHeader />
-
-            <TopMenu
-                homeUrl={'/'}
-                title={"Community"}
-                activeIndex={0}
-                items={items}
-            />
-
+        <CommunityLayout title={"Community"}>
             <CommunityBanner title="Get involved in the community!">
                 The Kotlin community is becoming more active all the time,
                 and we want to do whatever we can to foster this community and help it grow.
                 Here you can find online resources and information about activities in your area.
                 If you can't find any, we encourage you to organize one yourself!
                 JetBrains is here to provide help and support.
             </CommunityBanner>
-
-            <div style={{background: 'grey', height: '100px'}}></div>
-
-            <div className={textCn('rs-h1')}>H1 Header</div>
-            <div className={textCn('rs-h2')}>H2 Header</div>
-
-            <CtaBlock
-                topTitle={"Help us improve"}
-                buttons={
-                    <Button size="l" mode="rock" href="mailto:[email protected]">Write to us</Button>
-                }
-            >
-                <div className={"ktl-hero ktl-hero_theme_dark"}>Give us your feedback or ask any questions<br/>
-                    you have about the Kotlin community
-                </div>
-            </CtaBlock>
-            <ThemeProvider theme={theme}>
-                <GlobalFooter/>
-            </ThemeProvider>
-        </div>
+        </CommunityLayout>
     )
 }
 

diff --git a/pages/community/user-groups.tsx b/pages/community/user-groups.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import {CommunityLayout} from "../../components/layout/community-layout";
+
+function UserGroups() {
+    return (
+        <CommunityLayout title={"Kotlin User Groups"}>
+            <div className={"ktl-container"}>
+                <h1 className={"ktl-h1"}>Kotlin User Groups</h1>
+            </div>
+        </CommunityLayout>
+    );
+}
+
+export default UserGroups;