mirror of
https://gitea.com/gitea/docs.git
synced 2026-07-01 00:24:38 +00:00
Add subscription and community components (#47)
Close #46 Same as those in [blog](https://gitea.com/gitea/blog/pulls/272), but for docs and api Ejected DocPage (unsafe to eject) and ApiDoc (safe to eject) for layout changes  Screenshots  Co-authored-by: techknowlogick <techknowlogick@noreply.gitea.com> Co-authored-by: techknowlogick <techknowlogick@gitea.io> Reviewed-on: https://gitea.com/gitea/gitea-docusaurus/pulls/47 Co-authored-by: HesterG <hestergong@gmail.com> Co-committed-by: HesterG <hestergong@gmail.com>
This commit is contained in:
22
src/components/ActionCard/index.js
Normal file
22
src/components/ActionCard/index.js
Normal file
@@ -0,0 +1,22 @@
|
||||
import clsx from "clsx";
|
||||
import React from "react";
|
||||
import style from "./styles.module.css";
|
||||
|
||||
// skin?: "default" | "primary"
|
||||
export const ActionCard = ({ skin = "default", icon, title, description, svgBackgroundColor, children, className }) => {
|
||||
const styles = { background: svgBackgroundColor};
|
||||
return (
|
||||
<div
|
||||
className={clsx(style.root, className, {
|
||||
[style.skinPrimary]: skin === "primary",
|
||||
})}
|
||||
>
|
||||
<div className={style.icon} style={styles}>{icon}</div>
|
||||
<h3 className={style.title}>{title}</h3>
|
||||
<p className={style.description}>{description}</p>
|
||||
<div className={style.content}>{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActionCard
|
||||
53
src/components/ActionCard/styles.module.css
Normal file
53
src/components/ActionCard/styles.module.css
Normal file
@@ -0,0 +1,53 @@
|
||||
.root {
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
background: var(--theme-attention-card-bg-color);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: var(--font-size-big-1);
|
||||
font-weight: var(--ifm-font-weight-bold);
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 880px) {
|
||||
.root {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.skinPrimary {
|
||||
background: var(--ifm-color-primary-lighter);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .skinPrimary {
|
||||
background: var(--ifm-color-primary-darker);
|
||||
}
|
||||
|
||||
.skinPrimary .title,
|
||||
.skinPrimary .description {
|
||||
color: var(--theme-attention-card-text-color);
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 76px;
|
||||
width: 76px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
Reference in New Issue
Block a user