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/ApplicationError";
|
||||||
export * from "./src/Application/Kernel";
|
export * from "./src/Application/Kernel";
|
||||||
|
|
||||||
|
export * from "./src/Components/Box";
|
||||||
export * from "./src/Components/Card";
|
export * from "./src/Components/Card";
|
||||||
export * from "./src/Components/Buttons/Buttons";
|
export * from "./src/Components/Buttons/Buttons";
|
||||||
export * from "./src/Components/Curtains/Curtains";
|
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 React, {PropsWithChildren} from "react";
|
||||||
import {classes} from "../Utils";
|
import {classes} from "../Utils";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Content card component.
|
||||||
|
*/
|
||||||
export function Card({children, className, ...props}: PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): React.ReactElement
|
export function Card({children, className, ...props}: PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>): React.ReactElement
|
||||||
{
|
{
|
||||||
return (
|
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