89 lines
1.9 KiB
Plaintext
89 lines
1.9 KiB
Plaintext
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>
|