Skip to content

Commit

Permalink
Merge pull request #90 from falgun143/main
Browse files Browse the repository at this point in the history
"Added new Component of Projects"
  • Loading branch information
pooranjoyb authored Oct 20, 2023
2 parents 01fbd0a + 31743c6 commit be36dba
Show file tree
Hide file tree
Showing 16 changed files with 1,584 additions and 64 deletions.
68 changes: 68 additions & 0 deletions src/Components copy/Blog.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { useEffect, useState } from "react";
import Navbar from "./Navbar";
import axios from "axios";
import { useParams } from "react-router-dom";
import moment from "moment";
import Footer from "./Footer";
import { Loader } from "./Loader";

export default function Blog() {
const [blog, setBlog] = useState(null);
const params = useParams();
useEffect(() => {
const fetchBlog = async () => {
await axios
.get(
`https://www.googleapis.com/blogger/v3/blogs/3771334625318012412/posts/${
params.id
}?key=${import.meta.env.VITE_API_KEY}`
)
.then((res) => setBlog(res.data))
.catch((err) => err);
};
fetchBlog();
}, []);
return (
<>
<Navbar />
{blog === null ? (
<Loader />
) : (
<div className="w-100">
<div className="col-md-6 offset-md-3 p-3 mt-5 mb-5">
<h1 className="mb-4" style={{ fontWeight: 600 }}>
{blog.title}
</h1>
<a
className="w-100 d-flex mb-4"
target="_blank"
href={`${blog.author.url}`}
style={{ textDecoration: "none", color: "#000" }}
>
<h3
className="rounded-circle bg-warning d-flex justify-content-center align-items-center me-3"
style={{ height: "70px", width: "70px" }}
>
{blog.author.displayName[0]}
</h3>
<div className="d-flex flex-column text-start">
<span className="mb-2">
Written By <b>{blog.author.displayName}</b>
</span>
<small>
{moment(blog.published).startOf("hour").fromNow()}
</small>
</div>
</a>
<hr />
<p
className="text-muted"
dangerouslySetInnerHTML={{ __html: blog.content }}
/>
</div>
</div>
)}
<Footer />
</>
);
}
8 changes: 8 additions & 0 deletions src/Components copy/BlogPage.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import Blogs from "./Blogs";
export default function BlogPage() {
return (
<>
<Blogs />
</>
);
}
101 changes: 101 additions & 0 deletions src/Components copy/Blogs.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React, { useState, useEffect } from "react";
import axios from "axios";
import Navbar from "./Navbar";
import Footer from "./Footer";
import moment from "moment";
import { useNavigate } from "react-router-dom";
import { Loader } from "./Loader";

export default function Blogs() {
const [blogs, setBlogs] = useState([]);
const navigate = useNavigate();

useEffect(() => {
const blogsUrl = `https://www.googleapis.com/blogger/v3/blogs/3771334625318012412/posts?key=${
import.meta.env.VITE_API_KEY
}`;

axios
.get(blogsUrl)
.then((response) => {
const blogsData = response.data.items;
setBlogs(blogsData);
})
.catch((error) => {
console.error("Error fetching Blogger blogs:", error);
});
}, []);

return (
<>
<Navbar />
{blogs.length === 0 ? (
<Loader />
) : (
<div className="blogPage">
<div
id="endcontain"
className="container-fluid text-center mt-5"
style={{
backgroundColor: "white",
position: "sticky",
marginBottom: "5rem",
}}
>
<strong>
<font size="7">
<font color="#4285F4">Explore. </font>
<font color="#EA4335">Inspire. </font>
<font color="#34A853"> Discover. </font>
</font>
</strong>
</div>
<div className="my-5">
{blogs.map((blog) => (
<div
key={blog.id}
className="card text-center shadow mx-auto p-4"
style={{ width: "35rem", marginBottom: "3rem" }}
>
<div className="w-100 d-flex mb-4">
<h3
className="rounded-circle bg-warning d-flex justify-content-center align-items-center me-3"
style={{ width: "50px", height: "50px" }}
>
{blog.author.displayName[0]}
</h3>
<div className="d-flex flex-column text-start">
<span className="mb-2">
Written By <b>{blog.author.displayName}</b>
</span>
<small>
{moment(blog.published).startOf("hour").fromNow()}
</small>
</div>
</div>
<hr />
<div className="card-body text-start">
<h5 className="card-title mb-3">
<b>{blog.title}</b>
</h5>
<p
className="blog-content card-text"
dangerouslySetInnerHTML={{ __html: blog.content }}
/>
<b
className="text-primary"
onClick={() => navigate(`/blogs/${blog.id}`)}
style={{ cursor: "pointer" }}
>
READ MORE
</b>
</div>
</div>
))}
</div>
</div>
)}
<Footer className="blogFooter" />
</>
);
}
166 changes: 166 additions & 0 deletions src/Components copy/Contact.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
import React, { useState, useEffect } from "react";
import Navbar from "./Navbar";
import Footer from "./Footer";
import { database } from "../firebaseConfig";
import { Loader } from "./Loader";

export default function Contact() {
const [loading, setLoading] = useState(true);
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const [showModal, setShowModal] = useState(false);

const handleSubmit = (e) => {
e.preventDefault();
console.log(name, email, message);

database
.ref("Responses")
.push({
name: name,
email: email,
message: message,
})
.catch((error) => console.error("error submitting data :", error));

setShowModal(true);
};

useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 500);
}, []);

return (
<>
{loading ? (
<Loader />
) : (
<>
<Navbar />
<div
style={{
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column",
}}
>
<div className="col-md-4 mb-5 mt-4 contact_logo">
<img src="./img/logo.png" className="img-fluid" alt="..." />
</div>

<div
className="row card shadow d-flex align-items-center flex-row p-5 mb-3"
style={{ width: "80%", height: "auto" }}
>
<div className="col-md-6 p-5 img-box">
<img
className="img-fluid"
src="https://img.freepik.com/free-vector/flat-design-illustration-customer-support_23-2148887720.jpg?w=740&t=st=1697360648~exp=1697361248~hmac=c1048c6b6eabd19c22ce4b952e7408ee9bed89a1ee6505893c371e26c3849053"
alt=""
/>
</div>
<div className="col-md-6 col-sm-12 card p-4">
<p className="align-self-center h3 fw-bold text-primary mb-4">
Contact Us
</p>
<form onSubmit={handleSubmit}>
<div className="form-outline input-group mb-4 ">
<span className="input-group-text" id="basic-addon1">
<i className="fa-solid fa-user text-primary"></i>
</span>
<input
type="text"
id="form4Example1"
className="form-control"
placeholder="Name"
value={name}
onChange={(event) => {
setName(event.target.value);
}}
/>
</div>

<div className="form-outline input-group mb-4 ">
<span className="input-group-text" id="basic-addon1">
<i className="fa-solid fa-envelope text-primary"></i>
</span>
<input
type="email"
id="form4Example2"
className="form-control"
placeholder="Email"
value={email}
onChange={(event) => {
setEmail(event.target.value);
}}
/>
</div>

<div className="form-outline mb-4">
<textarea
className="form-control"
id="form4Example3"
rows="4"
value={message}
placeholder="Type your message here..."
onChange={(event) => {
setMessage(event.target.value);
}}
></textarea>
</div>

<div className="d-flex justify-content-center">
<button
type="submit"
className="btn btn-primary w-100 mb-4"
>
Send
</button>
</div>
</form>
</div>
</div>
</div>
<Footer />
</>
)}
{showModal && (
<div className="modal fade show" style={{ display: "block" }}>
<div
className={`modal-dialog modal-dialog-centered ${
window.innerWidth < 768 ? "modal-sm" : "modal-md"
} fade-in`}
>
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Message Sent Successfully</h5>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
onClick={() => setShowModal(false)}
></button>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-secondary"
data-bs-dismiss="modal"
onClick={() => setShowModal(false)}
>
Close
</button>
</div>
</div>
</div>
</div>
)}
</>
);
}
Loading

0 comments on commit be36dba

Please sign in to comment.