From 7eeb93850f96c61b351879ab1c971538e4c0e2a8 Mon Sep 17 00:00:00 2001 From: Bianka R Date: Fri, 2 May 2025 07:33:21 -0400 Subject: [PATCH 01/49] initial files and page outline --- package.json | 6 ++++-- src/App.jsx | 17 +++++++++++++++-- src/GlobalStyles.jsx | 21 +++++++++++++++++++++ src/main.jsx | 2 +- src/sections/Form.jsx | 5 +++++ src/sections/Header.jsx | 11 +++++++++++ src/sections/MessagesCard.jsx | 5 +++++ vite.config.js | 14 ++++++++++---- 8 files changed, 72 insertions(+), 9 deletions(-) create mode 100644 src/GlobalStyles.jsx create mode 100644 src/sections/Form.jsx create mode 100644 src/sections/Header.jsx create mode 100644 src/sections/MessagesCard.jsx diff --git a/package.json b/package.json index 2f66d295..b066b775 100644 --- a/package.json +++ b/package.json @@ -11,13 +11,15 @@ }, "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "styled-components": "^6.1.17" }, "devDependencies": { "@eslint/js": "^9.21.0", "@types/react": "^19.0.10", "@types/react-dom": "^19.0.4", - "@vitejs/plugin-react": "^4.3.4", + "@vitejs/plugin-react": "^4.4.1", + "babel-plugin-styled-components": "^2.1.4", "eslint": "^9.21.0", "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-refresh": "^0.4.19", diff --git a/src/App.jsx b/src/App.jsx index 07f2cbdf..f44d3c75 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,18 @@ -export const App = () => { +import { GlobalStyle } from "./GlobalStyles" +import Header from "../src/sections/Header" +import Form from "../src/sections/Form" +import MessagesCard from "../src/sections/MessagesCard" + +const App = () => { return ( -

Happy Thoughts

+ <> + +
+
+ + + ) } + +export default App diff --git a/src/GlobalStyles.jsx b/src/GlobalStyles.jsx new file mode 100644 index 00000000..4503f0a4 --- /dev/null +++ b/src/GlobalStyles.jsx @@ -0,0 +1,21 @@ +import { createGlobalStyle } from "styled-components"; + +export const GlobalStyle = createGlobalStyle` + * { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + body { + width: 100%; + margin: auto; + margin-top: 40px; + margin-bottom: 20px; + } + + a { + text-decoration: none; + color: inherit; + } +` \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 1b8ffe9b..92e76b09 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,7 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import { App } from './App.jsx' +import App from './App.jsx' import './index.css' diff --git a/src/sections/Form.jsx b/src/sections/Form.jsx new file mode 100644 index 00000000..1b86a6a8 --- /dev/null +++ b/src/sections/Form.jsx @@ -0,0 +1,5 @@ +const Form = () => { + +} + +export default Form \ No newline at end of file diff --git a/src/sections/Header.jsx b/src/sections/Header.jsx new file mode 100644 index 00000000..dd2e758e --- /dev/null +++ b/src/sections/Header.jsx @@ -0,0 +1,11 @@ + + +const Header = () => { + return ( + <> +

Happy Thoughts

+ + ) +} + +export default Header \ No newline at end of file diff --git a/src/sections/MessagesCard.jsx b/src/sections/MessagesCard.jsx new file mode 100644 index 00000000..78f44f92 --- /dev/null +++ b/src/sections/MessagesCard.jsx @@ -0,0 +1,5 @@ +const MessagesCard = () => { + +} + +export default MessagesCard \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index ba242447..315dcdd9 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,7 +1,13 @@ -import react from '@vitejs/plugin-react' +// vite.config.js import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' -// https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()] -}) + plugins: [ + react({ + babel: { + plugins: [['babel-plugin-styled-components', { displayName: true }]] + } + }) + ] +}) \ No newline at end of file From b81a88df17f421708d1652475f07e9b45e66948e Mon Sep 17 00:00:00 2001 From: Bianka R Date: Fri, 2 May 2025 07:42:47 -0400 Subject: [PATCH 02/49] intial header --- src/sections/Header.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/sections/Header.jsx b/src/sections/Header.jsx index dd2e758e..1850ec01 100644 --- a/src/sections/Header.jsx +++ b/src/sections/Header.jsx @@ -1,9 +1,17 @@ +import styled from "styled-components" +const Title = styled.h1` + margin: 0 auto; + width: 100%; + text-align: center; + padding: 2rem 1rem; + +` const Header = () => { return ( <> -

Happy Thoughts

+ Happy Thoughts ) } From 5688e0f1984343e54aa9c54f27886cabde8c2851 Mon Sep 17 00:00:00 2001 From: Bianka R Date: Fri, 2 May 2025 09:16:58 -0400 Subject: [PATCH 03/49] draft template of components for form and messageboard --- src/sections/Form.jsx | 60 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/src/sections/Form.jsx b/src/sections/Form.jsx index 1b86a6a8..0f678180 100644 --- a/src/sections/Form.jsx +++ b/src/sections/Form.jsx @@ -1,5 +1,63 @@ +import styled from "styled-components" +import { useState } from "react" + +const FormContainer = styled.form` + margin: 0 auto; + width: 100%; + display: flex; + flex-direction: column; + max-width: 800px; + align-items: center; + gap: 24px; + margin-bottom: 24px; +` + +const MessageBoard = styled.div` + margin: 0 auto; + width: 100%; + display: flex; + flex-direction: column; + max-width: 800px; + align-items: center; + gap: 24px; +` + const Form = () => { - + + const [MessageText, setMessageText] = useState('') + + const [submittedMessage, setSubmittedMessage] = useState() + + const handleSubmit = (event) => { + event.preventDefault() + setSubmittedMessage(MessageText) + setMessageText('') + } + + return ( + <> + +