Add generic content boxes.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
8787836346
commit
bd83459322
4 changed files with 30 additions and 0 deletions
1
index.ts
1
index.ts
|
@ -4,6 +4,7 @@ export * from "./src/Application/Application";
|
|||
export * from "./src/Application/ApplicationError";
|
||||
export * from "./src/Application/Kernel";
|
||||
|
||||
export * from "./src/Components/Box";
|
||||
export * from "./src/Components/Card";
|
||||
export * from "./src/Components/Buttons/Buttons";
|
||||
export * from "./src/Components/Curtains/Curtains";
|
||||
|
|
14
src/Components/Box.tsx
Normal file
14
src/Components/Box.tsx
Normal file
|
@ -0,0 +1,14 @@
|
|||
import React, {PropsWithChildren} from "react";
|
||||
import {classes} from "../Utils";
|
||||
|
||||
/**
|
||||
* Content box generic component.
|
||||
*/
|
||||
export function Box({children, className, ...props}: PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): React.ReactElement
|
||||
{
|
||||
return (
|
||||
<div className={classes("box", className)} {...props}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -1,6 +1,9 @@
|
|||
import React, {PropsWithChildren} from "react";
|
||||
import {classes} from "../Utils";
|
||||
|
||||
/**
|
||||
* Content card component.
|
||||
*/
|
||||
export function Card({children, className, ...props}: PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): React.ReactElement
|
||||
{
|
||||
return (
|
||||
|
|
12
src/styles/components/_box.less
Normal file
12
src/styles/components/_box.less
Normal file
|
@ -0,0 +1,12 @@
|
|||
.box
|
||||
{
|
||||
margin: 0.5em auto;
|
||||
width: 50em;
|
||||
max-width: 95%;
|
||||
box-sizing: border-box;
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
{
|
||||
margin: 0.33em 0 0.5em 0;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue