Skip to content
Snippets Groups Projects
Verified Commit e514c2f1 authored by João Magalhães's avatar João Magalhães :rocket:
Browse files

feat: initial key value example

parent 18f5a1e0
No related branches found
No related tags found
1 merge request!8Support for react.js components
Pipeline #1062 passed
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
import { Button } from "./components";
import { Button, Info, Pair } from "./components";
import "./app.css";
......@@ -9,7 +9,16 @@ export const App = () => {
const [count, setCount] = useState(0);
const getText = () => `Hello World ${count}`;
const onClick = () => setCount(count + 1);
return <Button text={getText()} onClick={onClick} />;
const pairs = () => [
<Pair key="tobias" name={"Tobias"} value="2"></Pair>,
<Pair key="matias" name={"Matias"} value="3"></Pair>
];
return (
<>
<Button text={getText()} onClick={onClick} />
<Info pairs={pairs()}></Info>
</>
);
};
export const startApp = (element: string) => {
......
.info {
font-size: 24px;
vertical-align: top;
}
.info > dt {
clear: both;
float: left;
margin-top: 12px;
}
.info > dt:first-of-type {
margin-top: 0px;
}
.info > dd {
float: right;
margin-top: 12px;
}
.info > dd:first-of-type {
margin-top: 0px;
}
.info::after {
clear: both;
content: '';
display: block;
}
import React, { FC } from "react";
import React, { FC, ReactNode } from "react";
import "./info.css";
type InfoProps = {
pairs?: ReactNode[];
style?: string[];
};
export const Info: FC<InfoProps> = ({ style = [] }) => {
export const Info: FC<InfoProps> = ({ pairs = [], style = [] }) => {
const classes = () => ["info", ...style].join(" ");
return <dl className={classes()}></dl>;
return <dl className={classes()}>{pairs}</dl>;
};
export default Info;
......@@ -3,27 +3,27 @@ import React, { FC } from "react";
import "./pair.css";
type PairProps = {
key: string;
name: string;
value?: string;
style?: string[];
onKeyClick?: () => void;
onNameClick?: () => void;
onValueClick?: () => void;
};
export const Pair: FC<PairProps> = ({
key,
name,
value,
style = [],
onKeyClick,
onNameClick,
onValueClick
}) => {
const classes = () => ["pair", ...style].join(" ");
const _onKeyClick = () => (onKeyClick ? onKeyClick() : undefined);
const _onNameClick = () => (onNameClick ? onNameClick() : undefined);
const _onValueClick = () => (onValueClick ? onValueClick() : undefined);
return (
<>
<dt className={classes()} onClick={_onKeyClick}>
{key}
<dt className={classes()} onClick={_onNameClick}>
{name}
</dt>
<dd className={classes()} onClick={_onValueClick}>
{value ?? ""}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment