Add files via upload

Bhoovi333 · Aug 28, 2024 · 2af4fca · 2af4fca
commit 2af4fca
Show file tree

Hide file tree

Showing 16 changed files with 455 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "poet",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
+    "bootstrap": "^5.3.3",
+    "react": "^18.3.1",
+    "react-bootstrap": "^2.10.4",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "vite": "^5.4.1"
+  }
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,36 @@
+*{
+    box-sizing:border-box;
+    padding: 0;
+    margin: 0;
+
+  }
+
+  .imgg{color: maroon;
+    width: 190px;height: 110px;border: 1px solid maroon;border-radius: 50%;margin-left: 10px;margin-right: 10px;background-color: maroon;
+  }
+
+#container{
+  padding-left: 18px;background-color: maroon; color: #ecf0f1;width: 100%;height: 60px;margin-top: 16px;
+
+ }
+  ul{
+    display: flex;justify-content: space-evenly;text-align: center;list-style: none;
+  }
+
+li{display: flex;justify-content: space-between;
+  margin: 5px 25px 5px 25px;padding: 5px 25px 5px 25px;
+}
+#bubu{
+ display: flex;justify-content: center;text-align: center;color:  maroon;height: 33px;margin-left: 5px;justify-content: center;padding-top: 1px;
+}
+#bubuu{
+  display: flex;justify-content: center;text-align: center;color:  maroon;height: 25px;padding-left: 5px;justify-content: center;margin-top: 1px;
+ }
+  .footer{
+    width: 100%;
+ justify-content: center;
+    bottom: 0;
+    text-align: center;
+    background-color: #8f9193;
+
+  }
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+
+import './App.css'
+import BasicExample from './components/body';
+
+import Header from './components/button'
+
+import Newsletter from './components/footer';
+import Lolo from './components/lolo';
+function App() {
+
+  return (
+    <>
+    <Header />
+    <br></br>
+   <BasicExample imgsrc="https://i.pinimg.com/236x/df/98/f5/df98f584d4976bd909dd877cc8239698.jpg" 
+   title="Caminar Manana" author="-By Skila Brown"/>
+    <BasicExample imgsrc="https://i.pinimg.com/236x/b7/75/35/b775359b4297ff3b8f27d2e4937e1f8e.jpg" 
+   title="Dante Thelia" author="-By Clevis James"/>
+    <BasicExample imgsrc="https://i.pinimg.com/236x/d9/93/a6/d993a64c2639de18a26a69d61d7cba89.jpg" 
+   title="Beowulf Volomani" author="-By Charles.h"/>
+    <BasicExample imgsrc="https://i.pinimg.com/236x/af/2b/81/af2b812b3b631f6eca2f522e9d52e6d4.jpg" 
+   title="The Weight" author="-By Mariana Fritz"/>
+   <BasicExample imgsrc="https://i.pinimg.com/236x/f6/1c/a7/f61ca78acc0a464f7065fd8e956b3e69.jpg" 
+   title="The Last Skin" author="-By Barbara"/>
+     <Lolo/>
+<Newsletter/>
+
+    </>
+  )
+}
+
+export default App;
diff --git a/src/components/body.jsx b/src/components/body.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Button from 'react-bootstrap/Button';
+import Card from 'react-bootstrap/Card';
+
+function BasicExample(props) {
+  return (
+    <>
+    <Card style={{ width: '16.7rem',alignContent:'center'}} className="d-inline-flex p-2">
+      <Card.Img  style={{ height: '14rem',alignContent:'center', justifyContent:'space-evenly'}}src={props.imgsrc} />
+      <Card.Body>
+        <Card.Title style={{ color:"brown"}}><i>{props.title}</i><br></br><h6>{props.author}</h6></Card.Title>
+        <Button style={{ backgroundColor:"maroon"}} variant="primary">Read More</Button>
+      </Card.Body>
+    </Card>
+    </>
+  );
+}
+
+export default BasicExample;
diff --git a/src/components/button.jsx b/src/components/button.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import SearchIcon from '@mui/icons-material/Search';
+const Header = () => {
+  return (
+
+    <>
+    <div className="d-inline-flex p-2" id="container">
+      <img src="https://api.logo.com/api/v2/images?logo=logo_5851544a-6d79-436d-8b35-d2de6125a972&width=128&height=128&fit=contain&margins=24&format=webp&quality=60&u=1724824803123" className='imgg' ></img>
+        <div className='headerr'> 
+       <ul>
+        <li><h4><i>PEOPLE'S POETRY HAVEN</i></h4><h5> __for readers, by poets</h5></li><br></br>
+        <li><input id="bubuu"type='text' placeholder='Search Poet Name Here' ></input><br></br>
+       <button id='bubu'><h5>Search</h5><SearchIcon/></button> </li>
+       </ul> 
+  </div>
+    </div></>
+  )
+}
+
+export default Header;
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+
+function Newsletter() {
+  const [email, setEmail] = useState("");
+  const [isEmailValid, setIsEmailValid] = useState(true);
+
+  function handleInput(event) {
+    setEmail(event.target.value);
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    if (email === "" || !/\S+@\S+\.\S+/.test(email)) {
+      setIsEmailValid(false);
+    } else {
+      setIsEmailValid(true);
+      alert(`Thank you for subscribing with ${email}`);
+      setEmail("");
+    }
+  }
+
+  return (
+    <>
+    <div className="footer">
+      <h2>Subscribe to our newsletter!</h2>
+      {!isEmailValid ? <p>Please enter a valid email address</p> : null}
+      <form onSubmit={handleSubmit}>
+        <input
+          type="email"
+          placeholder="Enter your email address "
+          value={email}
+          onChange={handleInput}
+          style={{
+            padding: "10px",
+            fontSize: "16px",
+            border: "2px solid #ddd",
+            borderRadius: "5px",marginLeft:"25px",textAlign:"center"
+          }}
+        />
+        <button 
+          type="submit"
+          style={{
+            margin: "10px",marginLeft:"35px",
+            padding: "10px",
+            backgroundColor: "#4CAF50",
+            border: "none",
+            color: "white",
+            fontSize: "16px",
+            borderRadius: "5px",
+            cursor: "pointer",
+            justifyContent:"center"
+          }}
+        >
+          Subscribe
+        </button>
+      </form>
+      <p>© Copyright 2024 PEOPLE'S POETRY HAVEN</p>
+      </div>
+    </>
+  );
+}
+
+export default Newsletter;
diff --git a/src/components/img.png b/src/components/img.png
diff --git a/src/components/login.css b/src/components/login.css
@@ -0,0 +1,52 @@
+.lolo {
+    text-align: center;
+    display: flex;
+    min-height: 100vh;
+    align-items: center;
+    justify-content: center;
+    color: rgb(15, 14, 14);
+    background-image:url('https://img.freepik.com/premium-photo/simple-elegant-background_1258715-152440.jpg?uid=R121066045&ga=GA1.1.1977216938.1680318996&semt=ais_hybrid' );width: 700px;
+  background-repeat: no-repeat;
+width: 100%;
+background-size: cover;}
+
+  .auth-form-container, .login-form, .register-form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media screen and (min-width: 600px) {
+    .auth-form-container {
+      padding: 5rem;
+      border: 1px solid white;
+      border-radius: 10px;
+      margin: 0.5rem;
+    }
+  }
+
+  label {
+    text-align: left;
+    padding: 0.25rem 0;
+  }
+
+  input {
+    margin: 0.5rem 0;
+    padding: 1rem;
+    border: none;
+    border-radius: 10px;
+  }
+
+  button {
+    border: none;
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+    cursor: pointer;
+    color: #9a4a09;
+  }
+
+  .link-btn {
+    background: none;
+    color: white;
+    text-decoration: underline;
+  }
diff --git a/src/components/login.jsx b/src/components/login.jsx
@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+export const Login = (props) => {
+    const [email, setEmail] = useState('');
+    const [pass, setPass] = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        console.log(email);
+    }
+
+    return (
+        <div className="auth-form-container">
+            <h2><button>LOGIN</button></h2>
+            <form className="login-form" onSubmit={handleSubmit}>
+                <label htmlFor="email">E-MAIL</label>
+                <input value={email} onChange={(e) => setEmail(e.target.value)}type="email" placeholder="youremail@gmail.com" id="email" name="email" />
+                <label htmlFor="password">PASSWORD</label>
+                <input value={pass} onChange={(e) => setPass(e.target.value)} type="password" placeholder="********" id="password" name="password" />
+                <button type="submit">Log In</button>
+            </form>
+            <button className="link-btn" onClick={() => props.onFormSwitch('register')}>Don't have an account? Register here.</button>
+        </div>
+    )
+}
diff --git a/src/components/logooo.png b/src/components/logooo.png
diff --git a/src/components/lolo.jsx b/src/components/lolo.jsx
@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+
+import './login.css';
+import { Login } from "./login";
+import { Register } from "./register";
+function Lolo() {
+  const [currentForm, setCurrentForm] = useState('login');
+
+  const toggleForm = (formName) => {
+    setCurrentForm(formName);
+  }
+
+  return (
+    <div className="lolo">
+      {
+        currentForm === "login" ? <Login onFormSwitch={toggleForm} /> : <Register onFormSwitch={toggleForm} />
+      }
+    </div>
+  );
+}
+
+export default Lolo;
diff --git a/src/components/register.jsx b/src/components/register.jsx
@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+
+export const Register = (props) => {
+    const [email, setEmail] = useState('');
+    const [pass, setPass] = useState('');
+    const [name, setName] = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        console.log(email);
+    }
+
+    return (
+        <div className="auth-form-container">
+            <h2><button>Register</button></h2>
+        <form className="register-form" onSubmit={handleSubmit}>
+            <label htmlFor="name">YOUR FULL NAME</label>
+            <input value={name} name="name" onChange={(e) => setName(e.target.value)} id="name" placeholder="enter full Name here" />
+            <label htmlFor="email">EMAIL</label>
+            <input value={email} onChange={(e) => setEmail(e.target.value)}type="email" placeholder="youremail@gmail.com" id="email" name="email" />
+            <label htmlFor="password">PASSWORD</label>
+            <input value={pass} onChange={(e) => setPass(e.target.value)} type="password" placeholder="********" id="password" name="password" />
+            <button type="submit">Log In</button>
+        </form>
+        <button className="link-btn" onClick={() => props.onFormSwitch('login')}>Already have an account? Login here.</button>
+    </div>
+    )
+}
diff --git a/src/main.jsx b/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)