From 0c2ca572201820b66139f11999a79da102ad00ff Mon Sep 17 00:00:00 2001 From: nikpachoo Date: Wed, 13 Apr 2022 18:45:06 +0300 Subject: [PATCH] ktl-657 feat: layout for Community Pages --- components/layout/community-layout.tsx | 82 ++++++++++++++++++++++++++ pages/community/events.tsx | 14 +++++ pages/community/index.tsx | 66 ++------------------- pages/community/user-groups.tsx | 14 +++++ 4 files changed, 114 insertions(+), 62 deletions(-) create mode 100644 components/layout/community-layout.tsx create mode 100644 pages/community/events.tsx create mode 100644 pages/community/user-groups.tsx diff --git a/components/layout/community-layout.tsx b/components/layout/community-layout.tsx new file mode 100644 index 00000000000..9d2cccaba6d --- /dev/null +++ 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 = ({title, children}) => { + const [theme, setTheme] = useState('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 ( + <> + + {title} + + + {}} + /> + + + + {children} + + Write to us + } + > +
Give us your feedback or ask any questions
+ you have about the Kotlin community +
+ + + + + + + ); +} diff --git a/pages/community/events.tsx b/pages/community/events.tsx new file mode 100644 index 00000000000..79993fa9007 --- /dev/null +++ b/pages/community/events.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import {CommunityLayout} from "../../components/layout/community-layout"; + +function UserGroups() { + return ( + +
+

Community Events

+
+ + ); +} + +export default UserGroups; \ No newline at end of file diff --git a/pages/community/index.tsx b/pages/community/index.tsx index e4c2190dad7..8f8aa3795fb 100644 --- a/pages/community/index.tsx +++ b/pages/community/index.tsx @@ -1,50 +1,11 @@ -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('dark'); - return ( -
- - 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. @@ -52,26 +13,7 @@ function Index() { If you can't find any, we encourage you to organize one yourself! JetBrains is here to provide help and support. - -
- -
H1 Header
-
H2 Header
- - Write to us - } - > -
Give us your feedback or ask any questions
- you have about the Kotlin community -
- - - - -
+ ) } diff --git a/pages/community/user-groups.tsx b/pages/community/user-groups.tsx new file mode 100644 index 00000000000..3bc6780ae33 --- /dev/null +++ b/pages/community/user-groups.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import {CommunityLayout} from "../../components/layout/community-layout"; + +function UserGroups() { + return ( + +
+

Kotlin User Groups

+
+ + ); +} + +export default UserGroups; \ No newline at end of file