jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 17:26:37 -04:00
Code Issues Activity

separate repository grid styles/logic from the card component

Browse Source
This commit is contained in:
Jake Jarvis
2021-12-31 15:28:28 -05:00
parent d0e00b197c
commit a6499fd5bb
10 changed files with 64 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
pages/projects.tsx
View File

@ -2,14 +2,14 @@ import { graphql } from "@octokit/graphql";
import Layout from "../components/Layout";
import Container from "../components/Container";
import PageTitle from "../components/page/PageTitle";
import RepositoryGrid from "../components/projects/RepositoryGrid";
import RepoCard from "../components/projects/RepoCard";
import { ProjectsIcon } from "../components/icons";
import type { GetStaticProps } from "next";
export default function Projects({ repos }) {
return (
<Layout>
<Container title="👨‍💻 Projects">
<Container title="Projects">
<PageTitle
title={
<>
@ -17,7 +17,42 @@ export default function Projects({ repos }) {
</>
}
/>
<RepositoryGrid repos={repos} />
<div>
{repos.map((repo) => (
<div key={repo.name} className="repo_card">
<RepoCard {...repo} />
</div>
))}
<style jsx>{`
div {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
div .repo_card {
flex-grow: 1;
margin: 0.5em;
width: 400px;
}
`}</style>
</div>
<p>
<a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
View more on GitHub...
</a>
<style jsx>{`
p {
text-align: center;
margin-bottom: 0;
}
`}</style>
</p>
</Container>
</Layout>
);