integrate into git

components/ProjectCard/ProjectCard.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import Image from "next/image";
+import styles from "./ProjectCard.module.sass";
+
+export function ProjectCard(props) {
+  return (
+    <a
+      href={props.url}
+      key={props.fullName}
+      className={[styles.card].concat(props.classNames).join(" ")}
+    >
+      <Image
+        className={props.mockupUrl ? styles.card_mockup : styles.card_gitea}
+        src={props.mockupUrl ? props.mockupUrl : props.avatarUrl}
+        alt={props.name}
+        width="15vw"
+        height="15vw"
+        unoptimized={true}
+      />
+      <h2>{props.name}</h2>
+      <p>{props.description || "-"}</p>
+    </a>
+  );
+}
+
+ProjectCard.defaultProps = {
+  avatarUrl: "/article_black_48dp.svg",
+};

components/ProjectCard/ProjectCard.module.sass

@@ -0,0 +1,96 @@
+.card
+    --transition-time: 0.15s
+    --hover-color: #0070f3
+
+    background-color: var(--color-0)
+
+    margin: 1rem
+    text-align: left
+    color: inherit
+    text-decoration: none
+    border: 2px solid var(--color-0)
+    border-radius: 10px
+
+    min-width: 166px
+    width: 20vw
+    max-width: 250px
+
+    min-height: 250px
+    height: 30vw
+    max-height: 375px
+
+    display: flex
+    flex-direction: column
+    justify-content: flex-start
+    align-content: space-around
+
+    text-overflow: ellipsis
+    overflow: hidden
+
+    transition: var(--transition-time) color, var(--transition-time) border-color
+
+    & > *
+        padding-bottom: 1.5rem
+        padding-left: 1.5rem
+        padding-right: 1.5rem
+
+    &:hover,
+
+    &:focus,
+
+    &:active
+        color: var(--hover-color)
+        border-color: var(--hover-color)
+        background-color: var(--color-black)
+
+    &_gitea
+        --hover-color: #609926
+
+    &_github
+        --hover-color: #4078c0
+
+    & > span,
+    & > img
+        max-width: 100px !important
+        max-height: 100px !important
+
+        min-width: 56px !important
+        width: 15vw !important
+
+        min-height: 83px !important
+        height: 15vw !important
+
+        padding: 0 !important
+        margin: 50px auto !important
+        transition: var(--transition-time) filter
+
+    & img
+        flex-grow: 3
+        filter: invert(98%) sepia(29%) saturate(491%) hue-rotate(301deg) brightness(99%) contrast(98%)
+
+    &_gitea:hover img
+        filter: invert(53%) sepia(18%) saturate(1808%) hue-rotate(47deg) brightness(96%) contrast(79%)
+        fill: var(--hover-color)
+        stroke: var(--hover-color)
+
+    & img.card_mockup
+        background-color: #f8f8f8
+        width: calc(100% - 3rem)
+        min-height: 150px
+        min-width: 150px
+        max-width: 100%
+        max-height: 100%
+        margin: 0
+        border-radius: 10px 10px 0px 0px
+
+    & h2
+        margin: 0 0 1rem 0
+        font-size: 1.5rem
+
+    & p
+        margin: 0
+        font-size: 1rem
+        line-height: 1.4
+        height: 5vw
+        text-overflow: ellipsis
+        overflow: hidden

components/ProjectCard/ProjectCard.stories.mdx

@@ -0,0 +1,88 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
+
+import styles from "../styles/Home.module.css";
+import ProjectCard from "../components/ProjectCard";
+
+<style>{`
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+`}</style>
+
+<Meta title="WWW/Components/ProjectCard" component={ProjectCard} />
+
+export const Template = (args) => (
+  <ProjectCard avatarUrl="article_black_48dp.svg" {...args} />
+);
+
+a test
+
+<Story
+  name="Mockup"
+  args={{
+    name: "Example Card",
+    description: "Example Description",
+    mockupUrl: "ltstyle_mockup.svg",
+    classNames: "card",
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+<Story
+  name="Gitea"
+  args={{
+    name: "Example Gitea Card",
+    description: "Example Description",
+    // avatarUrl: 'public/article_black_48dp.svg',
+    classNames: "card card_gitea",
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+<Story
+  name="Github"
+  args={{
+    name: "Example Github Card",
+    description: "Example Description",
+    // avatarUrl: 'public/article_black_48dp.svg',
+    classNames: "card card_github",
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Markdown in{" "}
+  <code>src/stories/ProjectCard.stories.mdx</code>
+</div>

components/ProjectCard/index.js

@@ -0,0 +1,4 @@
+import React from "react";
+import { ProjectCard } from "./ProjectCard";
+
+export default ProjectCard;