-
Notifications
You must be signed in to change notification settings - Fork 50
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #90 from falgun143/main
"Added new Component of Projects"
- Loading branch information
Showing
16 changed files
with
1,584 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 /> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import Blogs from "./Blogs"; | ||
export default function BlogPage() { | ||
return ( | ||
<> | ||
<Blogs /> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" /> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
)} | ||
</> | ||
); | ||
} |
Oops, something went wrong.