feat: new code for inputs #1

Merged
smig merged 1 commit from feat-input into main 2024-09-04 22:08:03 -04:00
5 changed files with 98 additions and 27 deletions

View file

@ -1,20 +1,25 @@
//import "./App.css"; //import "./App.css";
import { useState } from "react"; import { useState } from "react";
import Feed from "./components/feed"; import Feed from "./components/feed";
import ChangeLogInput from "./components/changeLogInput";
function App() { function App() {
const [feed, setFeed] = useState(tempData); const [feed, setFeed] = useState(tempData);
const [logInput, setLogInput] = useState("");
return ( return (
<> <>
<ChangeLogInput
setLogInput={setLogInput}
logInput={logInput}
feed={feed}
setFeed={setFeed}
/>
<Feed entries={feed} /> <Feed entries={feed} />
</> </>
); );
} }
//body={item.body}
//topics={item.topics}
//date={item.date}
const tempData = [ const tempData = [
{ {
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae nibh velit. Vivamus maximus elit et eleifend hendrerit. Praesent ac metus eget risus accumsan finibus. Cras tempor dignissim dolor, ut tempus tortor interdum non. Sed sit amet fringilla turpis. Sed congue feugiat orci, vel iaculis libero venenatis eu.", body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae nibh velit. Vivamus maximus elit et eleifend hendrerit. Praesent ac metus eget risus accumsan finibus. Cras tempor dignissim dolor, ut tempus tortor interdum non. Sed sit amet fringilla turpis. Sed congue feugiat orci, vel iaculis libero venenatis eu.",

View file

@ -0,0 +1,39 @@
import PropTypes from "prop-types";
import styles from "./changeLogInput.module.css";
const ChangeLogInput = (props) => {
const handleClick = (e) => {
const newEntry = {
body: props.logInput,
topics: ["test"],
date: new Date().toLocaleDateString(),
id: crypto.randomUUID(),
};
props.setFeed([newEntry, ...props.feed]);
props.setLogInput("");
};
return (
<div className={styles.container}>
<textarea
rows="1"
placeholder="What did you change..."
className={styles.input}
onChange={(e) => props.setLogInput(e.target.value)}
value={props.logInput}
/>
<button onClick={handleClick} className={styles.btn}>
Submit
</button>
</div>
);
};
ChangeLogInput.propTypes = {
setLogInput: PropTypes.func,
logInput: PropTypes.string,
feed: PropTypes.array,
setFeed: PropTypes.func,
};
export default ChangeLogInput;

View file

@ -0,0 +1,45 @@
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.input {
outline: 1px solid black;
width: 100%;
}
.btn {
width: 25%;
}
/*.inputSizer {*/
/* display: inline-grid;*/
/* vertical-align: top;*/
/* align-items: center;*/
/* position: relative;*/
/**/
/* &.stacked {*/
/* align-items: stretch;*/
/**/
/* &::after,*/
/* textarea {*/
/* grid-area: 2 / 1;*/
/* }*/
/* }*/
/* &::after,*/
/* textarea {*/
/* width: auto;*/
/* grid-area: 1 / 2;*/
/* resize: none;*/
/* background: none;*/
/* appearance: none;*/
/* border: none;*/
/* }*/
/* &::after {*/
/* content: attr(data-value) " ";*/
/* visibility: hidden;*/
/* white-space: pre-wrap;*/
/* }*/
/*}*/

View file

@ -12,6 +12,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 0 1 60%; flex: 0 1 60%;
width: 100%;
} }
.cardBottom { .cardBottom {

View file

@ -21,26 +21,7 @@ body {
/*min-height: 100vh;*/ /*min-height: 100vh;*/
} }
h1 { /*h1 {*/
font-size: 3.2em; /* font-size: 3.2em;*/
line-height: 1.1; /* line-height: 1.1;*/
} /*}*/
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}