Skip to content

Commit

Permalink
ktl-657 feat: KUGs banner
Browse files Browse the repository at this point in the history
  • Loading branch information
nikpachoo committed Apr 14, 2022
1 parent 0c2ca57 commit dd8b425
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 2 deletions.
61 changes: 61 additions & 0 deletions components/kugs-banner/kugs-banner.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
.banner {
margin: 22px 0 64px;
}

.text {
max-width: 740px;
}

.content {
margin-top: 32px;
}

.buttons {
margin-top: 32px;
display: flex;
flex-direction: column;
}

.link {
margin-top: 32px;
align-self: center;
}

@media (min-width: 768px) {
.banner {
margin: 64px 0 96px;
}

.content {
margin-top: 48px;
}

.buttons {
flex-direction: row;
align-items: center;
}

.link {
margin-top: 0;
margin-left: 32px;
align-self: auto;
}
}

@media (min-width: 1280px) {
.content {
display: flex;
justify-content: space-between;
align-items: center;
}

.buttons {
flex-direction: row-reverse;
margin-top: 0;
}

.link {
margin-left: 0;
margin-right: 32px;
}
}
36 changes: 36 additions & 0 deletions components/kugs-banner/kugs-banner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import Button from "@rescui/button";
import classnames from "classnames";
import React, {FC} from "react";
import styles from './kugs-banner.module.css';
import { ArrowRightIcon } from '@rescui/icons';
import { useTextStyles } from "@jetbrains/kotlin-web-site-ui/out/components/typography";

interface KugsBannerProps {
title: string;
children: React.ReactNode
}

export const KugsBanner: FC<KugsBannerProps> = function ({title, children}) {
const textCn = useTextStyles();
const linkClass = textCn('rs-link', { hardness: 'hard', mode: 'rock' });

return (
<div className={styles.banner}>
<h1 className={"ktl-h1"}>{title}</h1>

<div className={classnames(styles.content, 'ktl-text-1')}>
<div className={styles.text}>{children}</div>

<div className={styles.buttons}>
<Button
size={'l'}
href={'https://surveys.jetbrains.com/s3/submit-a-local-kotlin-user-group'}
iconPosition={'right'}
icon={<ArrowRightIcon />}
>Start a New KUG</Button>
<a className={classnames(linkClass, styles.link)} href={'https://kotlinlang.org/docs/kug-branding.html'}>KUG Guidelines</a>
</div>
</div>
</div>
);
};
2 changes: 1 addition & 1 deletion pages/_app.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";

import 'normalize.css';

import './global.css';
import '@jetbrains/kotlin-web-site-ui/out/components/typography/index.css';
import '@jetbrains/kotlin-web-site-ui/out/components/grid/index.css';

Expand Down
6 changes: 5 additions & 1 deletion pages/community/user-groups.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import React from "react";
import {CommunityLayout} from "../../components/layout/community-layout";
import {KugsBanner} from "../../components/kugs-banner/kugs-banner";

function UserGroups() {
return (
<CommunityLayout title={"Kotlin User Groups"}>
<div className={"ktl-container"}>
<h1 className={"ktl-h1"}>Kotlin User Groups</h1>
<KugsBanner title={"Kotlin User Groups (KUGs)"}>
A Kotlin User Group (or “KUG”) is a community of people who come together
to share their programming experience involving Kotlin and its ecosystem.
</KugsBanner>
</div>
</CommunityLayout>
);
Expand Down
5 changes: 5 additions & 0 deletions pages/global.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
:root {
--rs-color-primary-light-theme: var(--ktl-color-primary-light-theme);
--rs-color-primary-t-dim-light-theme: rgba(127, 82, 255, 0.8);
--rs-font-family-ui: var(--ktl-font-family-inter);
}

0 comments on commit dd8b425

Please sign in to comment.