Skip to content

Commit cff4b4e

Browse files
milesrichardsonmilesrichardson
committed
Stub out layout and sidebar of GitHub analytics example
Assisted by the one and only GPT-4
1 parent 9125d49 commit cff4b4e

11 files changed

Lines changed: 387 additions & 1 deletion

File tree

‎examples/nextjs-import-airbyte-github-export-seafowl/components/BaseLayout.module.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
height: 100vh;
5+
background-color: var(--background);
6+
}
7+
8+
.header {
9+
width: 100%;
10+
position: sticky;
11+
top: 0;
12+
z-index: 100;
13+
background-color: var(--header);
14+
color: var(--text);
15+
}
16+
17+
.main {
18+
display: flex;
19+
flex-grow: 1;
20+
overflow: hidden;
21+
}
22+
23+
.sidebar {
24+
width: 20%; /* adjust as per your needs */
25+
overflow-y: auto;
26+
/* add additional styles for your sidebar */
27+
color: var(--text);
28+
}
29+
30+
.content {
31+
width: 80%; /* adjust as per your needs */
32+
overflow-y: auto;
33+
position: relative;
34+
/* add additional styles for your content area */
35+
color: var(--text);
36+
background-color: var(--background);
37+
}

‎examples/nextjs-import-airbyte-github-export-seafowl/components/BaseLayout.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import styles from "./BaseLayout.module.css";
2+
import { Header } from "./Header";
3+
4+
export const BaseLayout = ({
5+
children,
6+
sidebar,
7+
}: React.PropsWithChildren<{
8+
sidebar: React.ReactNode;
9+
}>) => {
10+
return (
11+
<div className={styles.container}>
12+
<div className={styles.header}>
13+
<Header />
14+
</div>
15+
<div className={styles.main}>
16+
<div className={styles.sidebar}>{sidebar}</div>
17+
<div className={styles.content}>{children}</div>
18+
</div>
19+
</div>
20+
);
21+
};

‎examples/nextjs-import-airbyte-github-export-seafowl/components/Header.module.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.header {
2+
display: flex;
3+
justify-content: space-between;
4+
align-items: center;
5+
padding: 8px;
6+
}
7+
8+
.logo a {
9+
text-decoration: none;
10+
}
11+
12+
.logo a:hover .wordmark {
13+
text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
14+
}
15+
16+
.logo .wordmark {
17+
color: var(--primary);
18+
font-size: large;
19+
}
20+
21+
.logo .logo_link {
22+
display: inline-flex;
23+
align-items: center;
24+
justify-content: center;
25+
}
26+
27+
.logo svg {
28+
height: 36px;
29+
margin: 8px;
30+
}
31+
32+
.nav {
33+
margin: 16px;
34+
}
35+
36+
.nav a {
37+
margin-left: 20px;
38+
color: var(--secondary);
39+
text-decoration: none;
40+
}
41+
42+
.nav a:hover {
43+
text-decoration: underline;
44+
}

‎examples/nextjs-import-airbyte-github-export-seafowl/components/Header.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react";
2+
import Link from "next/link";
3+
import styles from "./Header.module.css";
4+
import { LogoSVG } from "./Logo";
5+
6+
interface HeaderProps {}
7+
8+
export const Header: React.FC<HeaderProps> = () => {
9+
return (
10+
<header className={styles.header}>
11+
<div className={styles.logo}>
12+
<Link href="/" className={styles.logo_link}>
13+
<LogoSVG size={36} />
14+
<div className={styles.wordmark}>GitHub Analytics</div>
15+
</Link>
16+
</div>
17+
<nav className={styles.nav}>
18+
<Link href="/link1">Link 1</Link>
19+
<Link href="/link2">Link 2</Link>
20+
<Link href="/link3">Link 3</Link>
21+
{/* Add more links as needed */}
22+
</nav>
23+
</header>
24+
);
25+
};

‎examples/nextjs-import-airbyte-github-export-seafowl/components/Logo.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
export const LogoSVG = ({ size }: { size: number }) => (
2+
<svg
3+
width={size}
4+
height={size}
5+
viewBox="0 0 1024 1024"
6+
xmlns="http://www.w3.org/2000/svg"
7+
>
8+
<path
9+
d="M38.31021 15.96259h946.58145c12.77007 0 22.34762 10.37568 22.34762 22.34762v946.58145c0 12.77007-10.37568 22.34762-22.34762 22.34762H38.31021c-12.77007 0-22.34762-10.37568-22.34762-22.34762V38.31021c0-11.97194 10.37568-22.34762 22.34762-22.34762z"
10+
fill="#7CB0F1"
11+
/>
12+
<path
13+
d="M984.89166 1024H38.31021C16.76071 1024 0 1006.44115 0 985.68979V38.31021C0 17.55885 17.55885 0 38.31021 0h946.58145c21.5495 0 38.31021 17.55885 38.31021 38.31021v946.58145C1024 1006.44116 1006.44115 1024 984.89166 1024zM38.31021 31.92517c-3.19252 0-6.38504 3.19252-6.38504 6.38504v946.58145c0 3.99065 3.19252 6.38504 6.38504 6.38504h946.58145c3.99065 0 6.38504-3.19252 6.38504-6.38504V38.31021c0-3.99065-3.19252-6.38504-6.38504-6.38504H38.31021z"
14+
fill="#131313"
15+
/>
16+
<path d="M79.81294 77.41855h865.97038v865.97038H79.81294z" fill="#F3F3F3" />
17+
<path
18+
d="M945.78332 960.14965H79.81294c-8.77942 0-15.96259-7.18316-15.96259-15.96259V77.41855c0-8.77942 7.18317-15.96259 15.96259-15.96259h865.97038c8.77942 0 15.96259 7.18317 15.96259 15.96259v865.97038c0 9.57755-7.18317 16.76072-15.96259 16.76072zm-850.0078-31.92518h834.04521V93.38114H95.77553v834.84333z"
19+
fill="#131313"
20+
/>
21+
<path
22+
d="M547.51676 247.4201h-10.37568v240.23695h241.03507v-8.77942c.79813-127.7007-102.9587-231.45752-230.6594-231.45752z"
23+
fill="#FB7E7E"
24+
/>
25+
<path
26+
d="M778.97428 503.61964H537.9392c-8.77942 0-15.96258-7.18316-15.96258-15.96259V247.42011c0-8.77942 7.18316-15.96259 15.96259-15.96259h10.37568c136.48012 0 247.4201 111.73811 246.62198 248.21824v8.77942c0 7.9813-7.18317 15.16446-15.9626 15.16446zm-225.07249-31.92517h209.1099c-3.99065-113.33438-95.77553-205.11926-209.1099-208.31177v208.31177z"
27+
fill="#131313"
28+
/>
29+
<path
30+
d="M484.46454 273.75838c-142.86516 6.38503-253.00702 126.90257-246.62198 268.9696 2.39439 63.05222 28.73266 123.71006 72.62977 168.4053l173.9922-173.9922v-263.3827z"
31+
fill="#7CB0F1"
32+
/>
33+
<path
34+
d="M310.47233 727.894c-3.99065 0-8.77942-1.59626-11.17381-4.78878-47.08963-47.88776-74.22603-111.73811-77.41855-179.5791-6.38504-150.84646 110.93998-279.3453 261.78644-285.73033 4.78877 0 8.77942 1.59626 11.97194 4.78878s4.78877 7.18316 4.78877 11.1738v264.18084c0 3.99064-1.59626 7.98129-4.78877 11.1738l-173.9922 173.99221c-2.3944 3.19252-6.38504 4.78878-11.17382 4.78878zm158.02962-436.57677c-125.30632 14.36632-220.28371 122.91192-214.6968 250.61262 2.39438 54.2728 22.34762 105.35308 57.46531 146.05768l157.23149-157.23149V291.31722z"
35+
fill="#131313"
36+
/>
37+
<path
38+
d="M495.63835 790.14809c138.87451 0 252.20888-110.14186 257.79579-248.21824h-268.9696v-3.19252L310.47233 711.93141c48.6859 49.48402 114.93063 78.21668 185.16602 78.21668z"
39+
fill="#FFD28B"
40+
/>
41+
<path
42+
d="M495.63835 806.11068c-73.4279 0-145.25955-30.32892-196.33983-83.00546-6.38504-6.38503-5.5869-15.96259 0-22.34762l173.9922-173.9922c4.78878-4.78878 11.17382-5.58691 17.55885-3.19252 1.59626.79813 2.39439 1.59626 3.99065 2.39438h259.39205c3.99065 0 8.77942 1.59626 11.17381 4.78878s4.78878 7.18317 4.78878 11.97194c-6.38504 147.65394-126.90258 263.3827-274.55651 263.3827zm-162.02027-94.9774c43.89712 39.90647 102.16056 62.2541 162.02027 63.05222 125.30631 0 227.46687-94.17926 241.03507-216.29306H487.65705L333.61808 711.13328zm-2.39438-513.99532H178.78097c-8.77942 0-15.96259-7.18317-15.96259-15.96259s7.18317-15.96259 15.9626-15.96259h152.4427c8.77943 0 15.9626 7.18317 15.9626 15.96259s-7.18317 15.96259-15.9626 15.96259zm0 66.24474H214.6968c-8.77942 0-15.96258-7.18317-15.96258-15.9626s7.18316-15.96258 15.96258-15.96258h116.5269c8.77942 0 15.96258 7.18316 15.96258 15.96259s-7.18316 15.96259-15.96259 15.96259zm513.19719 542.72798H682.40062c-8.77942 0-15.96258-7.18317-15.96258-15.96259s7.18316-15.96259 15.96258-15.96259H844.4209c8.77942 0 15.96259 7.18317 15.96259 15.96259s-7.18317 15.96259-15.9626 15.96259zm-30.32892 62.25409H682.40062c-8.77942 0-15.96258-7.18316-15.96258-15.96259s7.18316-15.96259 15.96258-15.96259h131.69135c8.77943 0 15.96259 7.18317 15.96259 15.9626s-7.18316 15.96258-15.96259 15.96258zm42.30086-671.22681h-173.9922c-8.77943 0-15.9626-7.18317-15.9626-15.96259s7.18317-15.96259 15.9626-15.96259h173.9922c8.77942 0 15.96259 7.18317 15.96259 15.96259s-7.18317 15.96259-15.9626 15.96259z"
43+
fill="#131313"
44+
/>
45+
</svg>
46+
);

‎examples/nextjs-import-airbyte-github-export-seafowl/components/Sidebar.module.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.sidebar {
2+
background-color: var(--background);
3+
border-right: 1px solid var(--header);
4+
position: relative;
5+
}
6+
7+
.importButtonContainer {
8+
position: sticky;
9+
top: 0;
10+
width: 100%;
11+
background-color: var(--background);
12+
display: flex;
13+
align-items: center;
14+
padding: 8px;
15+
border-bottom: 1px dotted var(--sidebar);
16+
}
17+
18+
.importButton {
19+
color: var(--background);
20+
background-color: var(--secondary);
21+
padding: 16px;
22+
border-radius: 16px;
23+
}
24+
25+
.importButton {
26+
text-decoration: none;
27+
font-weight: bold;
28+
}
29+
30+
.importButton:hover {
31+
text-shadow: 0 0 5px rgba(43, 0, 255, 0.5);
32+
}
33+
34+
.repoList {
35+
list-style: none;
36+
padding: 0;
37+
}
38+
39+
.repoList li {
40+
margin-left: 0;
41+
border-bottom: 1px dotted var(--sidebar);
42+
padding-top: 8px;
43+
padding-bottom: 8px;
44+
padding-left: 16px;
45+
padding-right: 16px;
46+
}
47+
48+
.repoList li a {
49+
text-decoration: none;
50+
}
51+
52+
.repoList li a:hover {
53+
text-decoration: underline;
54+
}

‎examples/nextjs-import-airbyte-github-export-seafowl/components/Sidebar.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from "react";
2+
import Link from "next/link";
3+
import styles from "./Sidebar.module.css";
4+
5+
export interface GitHubRepository {
6+
namespace: string;
7+
repository: string;
8+
}
9+
10+
interface SidebarProps {
11+
repositories: GitHubRepository[];
12+
}
13+
14+
export const Sidebar = ({ repositories }: React.PropsWithRef<SidebarProps>) => {
15+
return (
16+
<aside className={styles.sidebar}>
17+
<div className={styles.importButtonContainer}>
18+
<Link href="/start-import" className={styles.importButton}>
19+
Import Your Repository
20+
</Link>
21+
</div>
22+
<ul className={styles.repoList}>
23+
{repositories.map((repo, index) => (
24+
<li key={index}>
25+
<Link href={`/${repo.namespace}/${repo.repository}`}>
26+
{repo.namespace}/{repo.repository}
27+
</Link>
28+
</li>
29+
))}
30+
</ul>
31+
</aside>
32+
);
33+
};

‎examples/nextjs-import-airbyte-github-export-seafowl/components/global-styles/reset.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/* https://www.joshwcomeau.com/css/custom-css-reset/ */
2+
3+
/*
4+
1. Use a more-intuitive box-sizing model.
5+
*/
6+
*,
7+
*::before,
8+
*::after {
9+
box-sizing: border-box;
10+
}
11+
/*
12+
2. Remove default margin
13+
*/
14+
* {
15+
margin: 0;
16+
}
17+
/*
18+
3. Allow percentage-based heights in the application
19+
*/
20+
html,
21+
body {
22+
height: 100%;
23+
}
24+
/*
25+
Typographic tweaks!
26+
4. Add accessible line-height
27+
5. Improve text rendering
28+
*/
29+
body {
30+
line-height: 1.5;
31+
-webkit-font-smoothing: antialiased;
32+
}
33+
/*
34+
6. Improve media defaults
35+
*/
36+
img,
37+
picture,
38+
video,
39+
canvas,
40+
svg {
41+
display: block;
42+
max-width: 100%;
43+
}
44+
/*
45+
7. Remove built-in form typography styles
46+
*/
47+
input,
48+
button,
49+
textarea,
50+
select {
51+
font: inherit;
52+
}
53+
/*
54+
8. Avoid text overflows
55+
*/
56+
p,
57+
h1,
58+
h2,
59+
h3,
60+
h4,
61+
h5,
62+
h6 {
63+
overflow-wrap: break-word;
64+
}
65+
/*
66+
9. Create a root stacking context
67+
*/
68+
#root,
69+
#__next {
70+
isolation: isolate;
71+
}

‎examples/nextjs-import-airbyte-github-export-seafowl/components/global-styles/theme.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
:root {
2+
--primary: #007bff;
3+
--secondary: #ef00a7;
4+
--background: #ffffff;
5+
--header: #f2f6ff;
6+
/* --header: #718096; */
7+
--sidebar: #718096;
8+
--text: #1a202c;
9+
--subtext: #718096;
10+
}
11+
12+
body {
13+
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
14+
}

‎examples/nextjs-import-airbyte-github-export-seafowl/pages/_app.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import type { AppProps } from "next/app";
2+
import "../components/global-styles/reset.css";
3+
import "../components/global-styles/theme.css";
4+
5+
export default function GitHubAnalyticsApp({ Component, pageProps }: AppProps) {
6+
return <Component {...pageProps} />;
7+
}

0 commit comments

Comments
 (0)