From 7e3dc4ace4c6b21bc68264dc76c8c442aec8031a Mon Sep 17 00:00:00 2001 From: Ashelyn Rose Date: Mon, 8 May 2023 14:45:55 -0600 Subject: standardize component structure more --- app/Footer.tsx | 9 ---- app/Header.tsx | 43 ------------------ app/layout.tsx | 4 +- app/not-found.tsx | 6 ++- app/page.tsx | 7 ++- app/pay-transparency/page.tsx | 85 +++++++++++++++++++++++++++++++++++ app/posts/page.tsx | 12 +++++ components/InfoBar/InfoBar.module.css | 34 ++++++++++++++ components/InfoBar/index.tsx | 66 +++++++++++++++++++++++++++ components/layout/Footer.tsx | 9 ++++ components/layout/Header.tsx | 43 ++++++++++++++++++ styles/layout.css | 32 +++---------- styles/pay-transparency.module.css | 25 +++++++++++ 13 files changed, 290 insertions(+), 85 deletions(-) delete mode 100644 app/Footer.tsx delete mode 100644 app/Header.tsx create mode 100644 app/pay-transparency/page.tsx create mode 100644 app/posts/page.tsx create mode 100644 components/InfoBar/InfoBar.module.css create mode 100644 components/InfoBar/index.tsx create mode 100644 components/layout/Footer.tsx create mode 100644 components/layout/Header.tsx create mode 100644 styles/pay-transparency.module.css diff --git a/app/Footer.tsx b/app/Footer.tsx deleted file mode 100644 index 49089b4..0000000 --- a/app/Footer.tsx +++ /dev/null @@ -1,9 +0,0 @@ -export default function Footer() { - return ( - - ) -} diff --git a/app/Header.tsx b/app/Header.tsx deleted file mode 100644 index b5749ba..0000000 --- a/app/Header.tsx +++ /dev/null @@ -1,43 +0,0 @@ -'use client' - -import React from 'react' -import Image from 'next/image' - -import { usePathname } from 'next/navigation' - -import header from '~/images/aurora-1197753.jpg' - -export default function Title() { - const pathname = usePathname() - - const isHomepage = pathname === '/' - - return ( -
- {isHomepage - ?

tempest.dev

- : tempest.dev - } - -
- -
-
- ) -} diff --git a/app/layout.tsx b/app/layout.tsx index 3d25c44..22e1191 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -4,8 +4,8 @@ import 'victormono' import '~/styles/layout.css' import '~/styles/text.css' -import Header from './Header' -import Footer from './Footer' +import Header from '~/components/layout/Header' +import Footer from '~/components/layout/Footer' export default function SiteLayout({ children }: { children: ReactNode }) { return ( diff --git a/app/not-found.tsx b/app/not-found.tsx index 44753b0..b3a0fd4 100644 --- a/app/not-found.tsx +++ b/app/not-found.tsx @@ -1,12 +1,14 @@ +import InfoBar from "~/components/InfoBar/" + export default function NotFound() { return ( <>

Not Found (404)

- +

Feel free to start again from the home page, or diff --git a/app/page.tsx b/app/page.tsx index 49d887c..bc84594 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -24,8 +24,8 @@ export default function Index() { Cohort: millenial - Poly: - yes + Orientation: + ace Partners: three @@ -39,9 +39,8 @@ export default function Index() {

Note: This is the information for our system in aggregate, - for individual info see system + for individual info see our about page

-
) } diff --git a/app/pay-transparency/page.tsx b/app/pay-transparency/page.tsx new file mode 100644 index 0000000..cb4b053 --- /dev/null +++ b/app/pay-transparency/page.tsx @@ -0,0 +1,85 @@ +import InfoBar from "~/components/InfoBar/" + +import styles from '~/styles/pay-transparency.module.css' + +export default function PayTransparency() { + return ( + <> +

+ Pay Transparency +

+
+ +

+ This page lists the title and pay rate of every job we have held + since university graduation, and is inspired by{' '} + Rin's pay transparency + {' '}page. That page is what inspired us to make this one, and we hope the + idea continues to spread, as the more people know what common compensation is + across the industry, the more we can all benefit. +

+ +
+
+ Role + Start + End + Rate / Salary + + Software Developer + Jan 2020 + Sept 2020 + $35 USD / hour + + Software Engineer + Jan 2021 + Sept 2021 + $90,000 USD / year + * + + + Software Engineer + Sept 2021 + Oct 2022 + $100,800 USD / year + * + + + Software Engineer + Oct 2021 + Jan 2022 + $105,840 USD / year + * + + + Senior Software Engineer + Jan 2022 + May 2022 + $121,716 USD / year + * + + + Senior Software Engineer + June 2022 + March 2023 + $158,000 USD / year + ** + +
+
+ +

+ All positions listed here included health, dental, and vision insurance. +

+

+ The positions listed with * came with + a retirement account. +

+

+ The position listed with ** came with + stock options and a retirement account. +

+
+ + ) +} diff --git a/app/posts/page.tsx b/app/posts/page.tsx new file mode 100644 index 0000000..34f0e7f --- /dev/null +++ b/app/posts/page.tsx @@ -0,0 +1,12 @@ +export default function Posts() { + return ( + <> +

+ Posts +

+
+

This will have posts here eventually we promise

+
+ + ) +} diff --git a/components/InfoBar/InfoBar.module.css b/components/InfoBar/InfoBar.module.css new file mode 100644 index 0000000..7786bd1 --- /dev/null +++ b/components/InfoBar/InfoBar.module.css @@ -0,0 +1,34 @@ +.infobar { + margin: calc(-1 * var(--text-padding)); + margin-bottom: var(--text-padding); + padding: var(--text-padding); + background: var(--main-background); + height: var(--header-bar-height); + width: var(--main-width); + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; + border-bottom: solid 1px var(--text-dimmed); +} + +.infobar.sideNote { + color: var(--text-dimmed); + font-style: italic; +} + +.infobar.postMeta { + color: var(--text-dimmed); +} + +.infobar.postMeta .author { + color: var(--text-medium); +} + +.infobar.postMeta .date { + font-style: italic; +} + +.infobar + p { + margin-top: 0; +} diff --git a/components/InfoBar/index.tsx b/components/InfoBar/index.tsx new file mode 100644 index 0000000..cb5ac9a --- /dev/null +++ b/components/InfoBar/index.tsx @@ -0,0 +1,66 @@ +import { ReactNode } from 'react' +import styles from './InfoBar.module.css' + +interface ArbitraryChildrenProps { + children: ReactNode +} + +interface SideNoteProps { + text: string +} + +interface PostInfoPros { + publishedDate: Date, + authorName: string +} + +interface SystemMemberInfoProps { + memberName: string, + memberAvatar: string +} + +type InfobarProps = ( + ArbitraryChildrenProps + | SideNoteProps + | PostInfoPros + | SystemMemberInfoProps +) + +export default function InfoBar(props: InfobarProps) { + if ('text' in props) { + return ( + + ) + } + + if ('authorName' in props) { + return ( + + ) + } + + if ('memberName' in props) { + return ( + + ) + } + + if ('children' in props) { + return ( + + ) + } + + throw new Error('Unknown infobar type') +} diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx new file mode 100644 index 0000000..f18c60d --- /dev/null +++ b/components/layout/Footer.tsx @@ -0,0 +1,9 @@ +export default function Footer() { + return ( + + ) +} diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx new file mode 100644 index 0000000..23ba4b2 --- /dev/null +++ b/components/layout/Header.tsx @@ -0,0 +1,43 @@ +'use client' + +import React from 'react' +import Image from 'next/image' + +import { usePathname } from 'next/navigation' + +import header from '~/images/aurora-1197753.jpg' + +export default function Title() { + const pathname = usePathname() + + const isHomepage = pathname === '/' + + return ( +
+ {isHomepage + ?

tempest.dev

+ : tempest.dev + } + +
+ +
+
+ ) +} diff --git a/styles/layout.css b/styles/layout.css index f2b2dba..4a64adb 100644 --- a/styles/layout.css +++ b/styles/layout.css @@ -1,6 +1,7 @@ :root { --header-height: 400px; --header-overlap: 150px; + --min-main-overhang: 100px; --header-bar-height: 48px; --main-width: 600px; --footer-spacing: 8px; @@ -95,7 +96,7 @@ header .headerBackground { top: 0; left: 0; right: 0; - height: 400px; + height: var(--header-height); z-index: -1; user-select: none; } @@ -114,7 +115,7 @@ header .headerBackground::after { background: rgba(0,0,0,.35); } -header:not(.homepage) + h1 { +header:not(.homepage) ~ h1.pageTitle { width: var(--main-width); margin: 0 auto; padding: var(--text-padding); @@ -123,40 +124,21 @@ header:not(.homepage) + h1 { margin-top: -80px; } -main { - font-family: Arial, sans-serif; -} - main.mainColumn { width: var(--main-width); box-sizing: border-box; padding: var(--text-padding); margin: 0 auto; background: var(--main-background); - min-height: calc(var(--header-overlap) + 100px); + min-height: calc(var(--header-overlap) + var(--min-main-overhang)); box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12); } -header.homepage + main.mainColumn { - min-height: calc(var(--header-overlap) + 100px - var(--header-bar-height)); -} - -main.mainColumn aside.infobar { - margin: calc(-1 * var(--text-padding)); - margin-bottom: var(--text-padding); - padding: var(--text-padding); - background: var(--main-background); - height: var(--header-bar-height); - width: var(--main-width); - box-sizing: border-box; - display: flex; - flex-direction: row; - align-items: center; - border-bottom: solid 1px var(--text-dimmed); +header.homepage ~ .mainColumn { + min-height: calc(var(--header-overlap) + var(--min-main-overhang) - var(--header-bar-height)); } -main.mainColumn > p:first-child, -main.mainColumn .infobar + p { +main.mainColumn > p:first-child { margin-top: 0; } diff --git a/styles/pay-transparency.module.css b/styles/pay-transparency.module.css new file mode 100644 index 0000000..8df22bd --- /dev/null +++ b/styles/pay-transparency.module.css @@ -0,0 +1,25 @@ +.horizOverflow { + margin: 0 calc(-1 * var(--text-padding)); + width: calc(100% + 2 * var(--text-padding)); + overflow-x: auto; +} + +.table { + position: relative; + font-size: .9em; + padding: 0 var(--text-padding); + + display: grid; + grid-template-columns: repeat(4, auto); + column-gap: calc(.5 * var(--text-padding)); +} + +.table .heading { + color: var(--text-bright); + font-weight: bolder; + text-decoration: underline; +} + +.table > span:not(.position):not(.heading) { + color: var(--text-dimmed); +} -- cgit 1.4.1