diff --git a/.drone.yml b/.drone.yml index bca0b8ce..61536adf 100644 --- a/.drone.yml +++ b/.drone.yml @@ -1,35 +1,52 @@ --- kind: pipeline type: docker -name: node14 +name: node16 steps: +- name: check-lockfile + image: node:16 + commands: + - node ./check-lockfile.js + - name: install-deps - image: node:14 + image: node:16 + depends_on: + - check-lockfile commands: - npm install - name: lint - image: node:14 + image: node:16 depends_on: - install-deps commands: - npm run lint - name: build - image: node:14 + image: node:16 depends_on: - install-deps commands: - npm run build - name: export - image: node:14 + image: node:16 depends_on: - build commands: - npm run export +- name: deploy (staging) + image: node:16 + depends_on: + - export + environment: + TOKEN: + from_secret: STAGING_TOKEN + commands: + - 'curl -XPOST -H "Authorization: $TOKEN" -H "X-Branch: $DRONE_BRANCH" "https://csclub.uwaterloo.ca/~a3thakra/update-csc/"' + trigger: event: exclude: diff --git a/.eslintrc.js b/.eslintrc.js index 7a1058de..7beb8793 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -9,6 +9,9 @@ module.exports = { "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking", + "plugin:import/errors", + "plugin:import/warnings", + "plugin:import/typescript", "plugin:react/recommended", "plugin:prettier/recommended", ], @@ -16,12 +19,37 @@ module.exports = { rules: { "prettier/prettier": "error", + "import/first": "error", + "import/order": [ + "error", + { + "newlines-between": "always", + "alphabetize": { + "order": "asc", + "caseInsensitive": true, + }, + "pathGroups": [ + { + "pattern": "@/**", + "group": "external", + "position": "after", + }, + { + "pattern": "./*.css", + "group": "index", + "position": "after", + } + ], + }, + ], + "react/prop-types": "off", "react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "error", // Turn off these rules "@typescript-eslint/explicit-module-boundary-types": "off", + "import/no-unresolved": "off", }, settings: { react: { diff --git a/.vscode/settings.json b/.vscode/settings.json index 68d9b3b3..4867b9a0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,9 +4,7 @@ "eslint.codeActionsOnSave.mode": "all", "[css]": { "editor.suggest.insertMode": "replace", - "gitlens.codeLens.scopes": [ - "document" - ], + "gitlens.codeLens.scopes": ["document"], "editor.formatOnSave": true }, "[javascript]": { @@ -38,5 +36,10 @@ "files.exclude": { "node_modules": true }, - "editor.tabSize": 2 -} \ No newline at end of file + "editor.tabSize": 2, + "files.eol": "\n", + "[markdown]": { + "editor.wordWrap": "on", + "editor.quickSuggestions": false + } +} diff --git a/check-lockfile.js b/check-lockfile.js new file mode 100644 index 00000000..5215c499 --- /dev/null +++ b/check-lockfile.js @@ -0,0 +1,10 @@ +const lockfile = require('./package-lock.json') + +if (lockfile.lockfileVersion !== 2) { + console.error(` +Please upgrade to npm v7 and revert changes to the lockfile. + +- \`npm i -g npm\` to upgrade. +`.trim()) + process.exit(1) +} \ No newline at end of file diff --git a/components/Bubble.module.css b/components/Bubble.module.css index 3e0fc144..638c93b7 100644 --- a/components/Bubble.module.css +++ b/components/Bubble.module.css @@ -1,7 +1,71 @@ -.bubble { +.container { + position: relative; padding: calc(36rem / 16) 0; + overflow-x: clip; } -.bubble:nth-child(odd) { - background-color: var(--blue-1-20); +.bubble { + --border-radius: calc(5000rem / 16); + + display: flex; + flex-direction: row; + position: absolute; + top: 0; + height: 100%; + width: 100%; + justify-content: center; + align-items: flex-start; +} + +.bar { + height: 100%; + width: 100%; +} + +.decoration { + display: none; + width: calc(128rem / 16); +} + +.margin { + display: none; +} + +.content { + position: relative; + z-index: 1; +} + +.container:nth-child(odd) .bar { + background-color: var(--primary-accent-light); +} + +@media only screen and (min-width: calc(1350rem / 16)) { + .container:nth-child(odd) .decoration { + display: block; + position: absolute; + } + + .container:nth-child(4n + 1) .bar { + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + transform: translateX(-12.5vw); + } + + .container:nth-child(4n + 1) .decoration { + top: calc(-50rem / 16); + right: 8vw; + } + + .container:nth-child(4n + 3) .bar { + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); + transform: translateX(12.5vw); + } + + .container:nth-child(4n + 3) .decoration { + top: calc(-50rem / 16); + left: 8vw; + transform: rotateY(180deg); + } } diff --git a/components/Bubble.tsx b/components/Bubble.tsx index 39d7094b..54691079 100644 --- a/components/Bubble.tsx +++ b/components/Bubble.tsx @@ -1,11 +1,24 @@ import React from "react"; + +import { Image } from "@/components/Image"; + import { DefaultLayout } from "./DefaultLayout"; + import styles from "./Bubble.module.css"; -export default function Bubble(props: { children: React.ReactNode }) { +export function Bubble(props: { children: React.ReactNode }) { return ( -
- {props.children} +
+
+
+ +
+
+ {props.children} +
); } diff --git a/components/Button.module.css b/components/Button.module.css index a6020fbd..93ebcab1 100644 --- a/components/Button.module.css +++ b/components/Button.module.css @@ -2,8 +2,8 @@ .link { font-family: "Poppins", "sans-serif"; border-radius: calc(20rem / 16); - background-color: var(--blue-2); - color: white; + background-color: var(--primary-accent); + color: var(--primary-background); border: none; outline: none; transition-duration: 0.3s; @@ -13,7 +13,7 @@ .button:hover, .link:hover { - background-color: var(--teal-2); + background-color: var(--secondary-accent); cursor: pointer; } diff --git a/components/Button.tsx b/components/Button.tsx index e04b2df7..92d75463 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -1,4 +1,5 @@ import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react"; + import styles from "./Button.module.css"; interface ButtonProps extends ButtonHTMLAttributes { diff --git a/components/Code.module.css b/components/Code.module.css new file mode 100644 index 00000000..ba3d5b71 --- /dev/null +++ b/components/Code.module.css @@ -0,0 +1,6 @@ +.code { + padding: 0 calc(4rem / 16); + background: var(--code-background); + border-radius: calc(5rem / 16); + word-wrap: break-word; +} diff --git a/components/Code.tsx b/components/Code.tsx new file mode 100644 index 00000000..1ca5273b --- /dev/null +++ b/components/Code.tsx @@ -0,0 +1,9 @@ +import React, { HTMLAttributes } from "react"; + +import styles from "./Code.module.css"; + +export function Code(props: HTMLAttributes) { + const classes = [styles.code, props.className ?? ""]; + + return ; +} diff --git a/components/ConnectWithUs.module.css b/components/ConnectWithUs.module.css index 8160a48d..f2d940f5 100644 --- a/components/ConnectWithUs.module.css +++ b/components/ConnectWithUs.module.css @@ -1,8 +1,7 @@ .header { - color: var(--blue-2); + color: var(--primary-accent); font-weight: 600; font-size: calc(36rem / 16); - margin-bottom: calc(12rem / 16); } .socialLinks { diff --git a/components/ConnectWithUs.tsx b/components/ConnectWithUs.tsx index cef31144..7e9d333b 100644 --- a/components/ConnectWithUs.tsx +++ b/components/ConnectWithUs.tsx @@ -1,7 +1,9 @@ import React from "react"; -import styles from "./ConnectWithUs.module.css"; -import { SocialLinks } from "./SocialLinks"; + import { Link } from "./Link"; +import { SocialLinks } from "./SocialLinks"; + +import styles from "./ConnectWithUs.module.css"; export function ConnectWithUs() { return ( diff --git a/components/DefaultLayout.module.css b/components/DefaultLayout.module.css index 31cadd0b..5b18ff5f 100644 --- a/components/DefaultLayout.module.css +++ b/components/DefaultLayout.module.css @@ -2,5 +2,4 @@ margin: 0 auto; max-width: calc(800rem / 16); padding: 0 calc(20rem / 16); - padding-bottom: calc(20rem / 16); } diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx index 1cc4fb4f..49992358 100644 --- a/components/DefaultLayout.tsx +++ b/components/DefaultLayout.tsx @@ -1,4 +1,5 @@ import React from "react"; + import styles from "./DefaultLayout.module.css"; export function DefaultLayout(props: { children: React.ReactNode }) { diff --git a/components/EmailSignup.module.css b/components/EmailSignup.module.css index 0d9567c8..c44609b8 100644 --- a/components/EmailSignup.module.css +++ b/components/EmailSignup.module.css @@ -1,17 +1,13 @@ -.container form { - box-sizing: border-box; -} - .header { - color: var(--blue-2); + color: var(--primary-accent); font-weight: 600; font-size: calc(36rem / 16); - margin-bottom: calc(12rem / 16); } .button { - margin-top: calc(34rem / 16); + margin-top: calc(26rem / 16); display: block; + width: fit-content; } @media only screen and (max-width: calc(768rem / 16)) { diff --git a/components/EmailSignup.tsx b/components/EmailSignup.tsx index c5e3ba0e..064a3f13 100644 --- a/components/EmailSignup.tsx +++ b/components/EmailSignup.tsx @@ -1,19 +1,24 @@ import React from "react"; -import styles from "./EmailSignup.module.css"; + import { Button } from "./Button"; -import { Input } from "./Input"; + +import styles from "./EmailSignup.module.css"; export function EmailSignup() { return (
-

Join Our Mailing List!

-
- - - -
+

Join our mailing list!

+

+ Join our mailing list to receive email notifications about important + news and upcoming events! +

+
); } diff --git a/components/EventCard.module.css b/components/EventCard.module.css index 269f51b0..27393553 100644 --- a/components/EventCard.module.css +++ b/components/EventCard.module.css @@ -41,7 +41,7 @@ } .content > h2 { - color: var(--purple-2); + color: var(--primary-heading); font-size: 1rem; margin-bottom: calc(14rem / 16); } diff --git a/components/EventCard.tsx b/components/EventCard.tsx index 81a07ada..eeae0997 100644 --- a/components/EventCard.tsx +++ b/components/EventCard.tsx @@ -1,10 +1,11 @@ import React, { ReactNode } from "react"; -import { Button } from "./Button"; -import styles from "./EventCard.module.css"; +import { Button } from "./Button"; import { EventSetting } from "./EventSetting"; import { Image } from "./Image"; +import styles from "./EventCard.module.css"; + interface EventCardProps { name: string; short: string; diff --git a/components/EventDescriptionCard.module.css b/components/EventDescriptionCard.module.css index 011ecd2a..baab9b78 100644 --- a/components/EventDescriptionCard.module.css +++ b/components/EventDescriptionCard.module.css @@ -4,7 +4,7 @@ max-width: calc(540rem / 16); padding: calc(24rem / 16); border-radius: calc(20rem / 16); - background-color: white; + background-color: var(--primary-background); } .poster { @@ -35,7 +35,7 @@ .setting { margin: 0; - color: var(--blue-2); + color: var(--primary-accent); font-size: calc(14rem / 16); font-weight: 600; } @@ -50,6 +50,7 @@ @media only screen and (max-width: calc(768rem / 16)) { .card { + max-width: unset; padding: 0; background-color: transparent; } @@ -66,7 +67,7 @@ .poster { width: calc(95rem / 16); height: calc(95rem / 16); - border: 1px solid var(--purple-2); + border: 1px solid var(--primary-heading); box-sizing: border-box; margin-right: calc(14rem / 16); } diff --git a/components/EventDescriptionCard.tsx b/components/EventDescriptionCard.tsx index 11c73d97..86c9b3db 100644 --- a/components/EventDescriptionCard.tsx +++ b/components/EventDescriptionCard.tsx @@ -1,10 +1,12 @@ import React from "react"; + import { Button } from "./Button"; -import { Image } from "./Image"; import { EventSetting } from "./EventSetting"; -import styles from "./EventDescriptionCard.module.css"; +import { Image } from "./Image"; import { Discord, Twitch, Instagram, Facebook } from "./SocialLinks"; +import styles from "./EventDescriptionCard.module.css"; + interface Props { name: string; short: string; diff --git a/components/EventSetting.tsx b/components/EventSetting.tsx index aa95025c..a0725385 100644 --- a/components/EventSetting.tsx +++ b/components/EventSetting.tsx @@ -1,4 +1,5 @@ import React from "react"; + import styles from "./EventSetting.module.css"; interface Props { diff --git a/components/Footer.module.css b/components/Footer.module.css index 885469ed..337a419f 100644 --- a/components/Footer.module.css +++ b/components/Footer.module.css @@ -1,6 +1,6 @@ .footer { box-sizing: border-box; - background: var(--purple-2); + background: var(--primary-heading); height: calc(66rem / 16); padding: calc(14rem / 16) 0; width: 100%; @@ -18,11 +18,16 @@ } .text { - color: var(--white); + color: var(--primary-background); font-style: normal; text-align: center; } +.email { + color: unset; + text-decoration: unset; +} + @media only screen and (max-width: calc(768rem / 16)) { .footer { height: calc(120rem / 16); diff --git a/components/Footer.tsx b/components/Footer.tsx index 0ce6c715..0d008838 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,13 +1,19 @@ +import Link from "next/link"; import React from "react"; -import styles from "./Footer.module.css"; + import { SocialLinks } from "./SocialLinks"; +import styles from "./Footer.module.css"; + export function Footer() { return (
- Have questions? Email us at XX@XXX.COM + Have questions? Email us at{" "} + + exec@csclub.uwaterloo.ca +
diff --git a/components/HorizontalLine.module.css b/components/HorizontalLine.module.css new file mode 100644 index 00000000..16f3ab85 --- /dev/null +++ b/components/HorizontalLine.module.css @@ -0,0 +1,7 @@ +.line { + display: block; + margin: calc(1rem / 16) 0 calc(34rem / 16); + height: calc(1rem / 16); + border: none; + background-color: var(--primary-heading); +} diff --git a/components/HorizontalLine.tsx b/components/HorizontalLine.tsx new file mode 100644 index 00000000..598f196c --- /dev/null +++ b/components/HorizontalLine.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +import styles from "./HorizontalLine.module.css"; + +export function HorizontalLine() { + return
; +} diff --git a/components/Input.module.css b/components/Input.module.css index 7fcb4c83..44209442 100644 --- a/components/Input.module.css +++ b/components/Input.module.css @@ -8,20 +8,20 @@ border: 0; border-radius: calc(20rem / 16); - background-color: var(--grey-1-24); + background-color: var(--input-background); font-size: calc(18rem / 16); line-height: calc(30rem / 16); - color: var(--grey-3); + color: var(--input-text); } .input::placeholder { - color: var(--grey-2); + color: var(--input-placeholder-text); font-weight: 700; } .input:is(:active, :hover, :focus) { box-sizing: border-box; - border: calc(3rem / 16) solid var(--blue-1); + border: calc(3rem / 16) solid var(--primary-accent-soft); border-radius: calc(20rem / 16); outline: none; padding: calc(7rem / 16) calc(28rem / 16); diff --git a/components/Input.tsx b/components/Input.tsx index 477b3045..fb0cb0b3 100644 --- a/components/Input.tsx +++ b/components/Input.tsx @@ -1,4 +1,5 @@ import React, { InputHTMLAttributes } from "react"; + import styles from "./Input.module.css"; export function Input(props: InputHTMLAttributes) { diff --git a/components/Link.module.css b/components/Link.module.css index ba0d61f8..8edbfa31 100644 --- a/components/Link.module.css +++ b/components/Link.module.css @@ -1,10 +1,10 @@ .link { - color: var(--blue-2); + color: var(--primary-accent); transition-duration: 0.3s; text-decoration: none; white-space: normal; } .link:hover { - color: var(--teal-2); + color: var(--secondary-accent); } diff --git a/components/Link.tsx b/components/Link.tsx index 97325ff6..15c6cfab 100644 --- a/components/Link.tsx +++ b/components/Link.tsx @@ -1,7 +1,7 @@ +import NextLink, { LinkProps as NextLinkProps } from "next/link"; import React from "react"; + import styles from "./Link.module.css"; -import NextLink from "next/link"; -import { LinkProps as NextLinkProps } from "next/link"; type Props = Omit & { href: string }; diff --git a/components/MiniEventCard.module.css b/components/MiniEventCard.module.css index ce61aa2b..59e1bbec 100644 --- a/components/MiniEventCard.module.css +++ b/components/MiniEventCard.module.css @@ -5,7 +5,7 @@ } .card:nth-child(odd) { - background-color: var(--teal-2-20); + background-color: var(--secondary-accent-light); } .name { @@ -19,7 +19,7 @@ } .info { - color: var(--purple-2); + color: var(--primary-heading); margin-bottom: calc(12rem / 16); } @@ -29,7 +29,7 @@ right: 0; cursor: pointer; margin: calc(20rem / 16); - color: var(--blue-2); + color: var(--primary-accent); font-size: calc(14rem / 16); } @@ -46,5 +46,26 @@ } .dropDownIcon { - fill: var(--blue-2); + fill: var(--primary-accent); +} + +@media only screen and (max-width: calc(768rem / 16)) { + .details { + bottom: 0; + left: 0; + top: unset; + right: unset; + } + + .dropDownIcon { + display: none; + } + + .card { + padding-bottom: calc(48rem / 16); + } + + .nameSpacer { + display: none; + } } diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx index 5236a7b0..be2c7928 100644 --- a/components/MiniEventCard.tsx +++ b/components/MiniEventCard.tsx @@ -1,5 +1,7 @@ import React, { ReactNode } from "react"; + import { EventSetting } from "./EventSetting"; + import styles from "./MiniEventCard.module.css"; interface Props { @@ -32,10 +34,8 @@ export const MiniEventCard: React.FC = ({

{short}

- -

View details {dropDownIcon}

+
View details {dropDownIcon}
-
{description}
); diff --git a/components/MiniTechTalkCard.module.css b/components/MiniTechTalkCard.module.css new file mode 100644 index 00000000..01741c1a --- /dev/null +++ b/components/MiniTechTalkCard.module.css @@ -0,0 +1,40 @@ +.card { + display: flex; + flex-direction: row; + box-sizing: border-box; + padding: calc(16rem / 16); + color: var(--purple-2); + font-size: 1rem; +} + +.card aside { + max-width: calc(142rem / 16); + margin-right: calc(45rem / 16); + display: flex; + justify-content: center; + align-items: center; +} + +.card aside img { + max-width: calc(142rem / 16); + max-height: 100%; + object-fit: cover; +} + +.content { + padding: calc(4rem / 16); +} + +.content h1 { + margin: 0; + margin-top: calc(4rem / 16); + font-size: calc(18rem / 16); +} + +.card section { + padding-bottom: 0; +} + +.spacer { + margin-top: calc(76rem / 16); +} diff --git a/components/MiniTechTalkCard.tsx b/components/MiniTechTalkCard.tsx new file mode 100644 index 00000000..c6f3ad99 --- /dev/null +++ b/components/MiniTechTalkCard.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +import { Image } from "./Image"; + +import styles from "./MiniTechTalkCard.module.css"; + +interface MiniTechTalkProps { + name: string; + short: string; + poster?: string; +} + +export function MiniTechTalkCard({ name, poster, short }: MiniTechTalkProps) { + return ( +
+ +
+

{name}

+

{short}

+
+
+ ); +} diff --git a/components/Navbar.module.css b/components/Navbar.module.css index fa656d66..82e5475d 100644 --- a/components/Navbar.module.css +++ b/components/Navbar.module.css @@ -2,8 +2,9 @@ display: flex; justify-content: center; align-items: center; + z-index: 10; - background-color: var(--white); + background-color: var(--primary-background); } .navContent { @@ -62,16 +63,16 @@ } .navMenu a { - color: var(--purple-2); + color: var(--primary-heading); text-decoration: none; } .navMenu a.currentPage { - color: var(--blue-2); + color: var(--primary-accent); } .navMenu > li > a:hover { - color: var(--blue-2); + color: var(--primary-accent); font-weight: 600; } @@ -115,8 +116,8 @@ padding: 0; border-radius: calc(8rem / 16); - background-color: var(--white); - box-shadow: 0 calc(8rem / 16) 1rem var(--blue-1-20); + background-color: var(--primary-background); + box-shadow: 0 calc(8rem / 16) 1rem var(--primary-accent-light); font-size: calc(14rem / 16); } @@ -133,7 +134,7 @@ .dropdown li:hover a, .dropdown li a:focus { - background-color: var(--blue-1-20); + background-color: var(--primary-accent-light); } .dropdown li:first-child a { @@ -154,13 +155,13 @@ /* On a smaller desktop screen, keep the same navbar layout but decrease the * horizontal padding so it still fits */ -@media screen and (max-width: calc(960rem / 16)) { +@media only screen and (max-width: calc(960rem / 16)) { .navContent { padding: calc(28rem / 16) calc(64rem / 16); } } -@media screen and (max-width: calc(768rem / 16)) { +@media only screen and (max-width: calc(768rem / 16)) { .navContent { display: grid; grid-template-columns: 1fr 1fr 1fr; @@ -223,7 +224,7 @@ left: 0; z-index: 20; - background-color: var(--navbar-gray); + background-color: var(--navbar-page-overlay); opacity: 0; transition: 0.5s; @@ -243,7 +244,7 @@ padding: calc(calc(64rem / 16) - 1rem); padding-left: calc(calc(78rem / 16) - 1rem); - background-color: var(--off-white); + background-color: var(--secondary-background); transform: translateX(100vw); transition: 0.5s; diff --git a/components/Navbar.tsx b/components/Navbar.tsx index a127b938..ab3e1c1d 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -1,7 +1,9 @@ -import React, { useReducer } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; +import React, { useReducer } from "react"; + import { Image } from "./Image"; + import styles from "./Navbar.module.css"; type Menu = { @@ -60,6 +62,10 @@ const menu: Menu = [ name: "Services", route: "/resources/services", }, + { + name: "Machine Usage", + route: "/resources/machine-usage-agreement", + }, { name: "Tech Talks", route: "/resources/tech-talks", @@ -68,6 +74,14 @@ const menu: Menu = [ name: "CS Club Wiki", route: "https://wiki.csclub.uwaterloo.ca", }, + { + name: "Advice", + route: "/resources/advice/coop", + }, + { + name: "Internships", + route: "https://github.com/uwcsc/winter2022-internships", + }, ], }, ]; diff --git a/components/NewsCard.module.css b/components/NewsCard.module.css index 87d6ba99..fd83dd67 100644 --- a/components/NewsCard.module.css +++ b/components/NewsCard.module.css @@ -1,17 +1,23 @@ .card { padding: calc(30rem / 16) calc(40rem / 16); max-width: calc(524rem / 16); - background-color: var(--white); + background-color: var(--primary-background); border-radius: calc(20rem / 16); } +.fit.card { + max-width: unset; + padding: unset; + border-radius: unset; +} + .date { font-size: calc(18rem / 16); margin: 0; } .author { - color: var(--purple-1); + color: var(--secondary-heading); font-style: normal; } @@ -22,9 +28,14 @@ @media only screen and (max-width: calc(768rem / 16)) { .card { padding: 0; + max-width: unset; background-color: transparent; } + .date { + font-weight: 600; + } + .content > *:first-child { margin-top: 1rem; } diff --git a/components/NewsCard.tsx b/components/NewsCard.tsx index f88c9676..16a31be3 100644 --- a/components/NewsCard.tsx +++ b/components/NewsCard.tsx @@ -1,19 +1,24 @@ import React, { ReactNode } from "react"; + import styles from "./NewsCard.module.css"; interface NewsCardProps { date: Date; author: string; children: ReactNode; + fit?: boolean; } export const NewsCard: React.FC = ({ date, author, children, + fit = false, }) => { + const classes = fit ? [styles.card, styles.fit] : [styles.card]; + return ( -
+