Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uploadproject UI changes #415

Merged
merged 3 commits into from
Nov 7, 2024
Merged

Uploadproject UI changes #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b51921e
upload
VinayLodhi1712 Nov 7, 2024
82f4163
Merge branch 'main' of https://github.com/VinayLodhi1712/Bitbox into …
VinayLodhi1712 Nov 7, 2024
fc19d72
Upload project UI changes
VinayLodhi1712 Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion client/src/component/AddProject.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,4 +133,4 @@ AddProject.propTypes = {
mode: PropTypes.string,
};

export default AddProject;
export default AddProject;
20 changes: 8 additions & 12 deletions client/src/component/Faq.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// component/FAQ.jsx
import { useState } from "react";
import "../css/Faq.css";
import React, { useState } from 'react';
import './FAQ.css'; // Import the CSS file for styling

const FAQ = () => {
const [activeIndex, setActiveIndex] = useState(null);
Expand All @@ -27,29 +27,25 @@ const FAQ = () => {
const faqData = [
{
question: "What is BitBox?",
answer:
"BitBox is a user-friendly platform that simplifies version control and collaboration for developers.",
answer: "BitBox is a user-friendly platform that simplifies version control and collaboration for developers.",
},
{
question: "How does BitBox enhance collaboration?",
answer:
"BitBox offers intuitive tools that enable both solo programmers and large teams to manage projects efficiently.",
answer: "BitBox offers intuitive tools that enable both solo programmers and large teams to manage projects efficiently.",
},
{
question: "How do I get started with BitBox?",
answer:
"You can sign up for an account on BitBox and start managing your projects right away.",
answer: "You can sign up for an account on BitBox and start managing your projects right away.",
},
{
question: "Is BitBox compatible with modern development workflows?",
answer:
"Yes, BitBox seamlessly integrates with modern development workflows, providing fast and reliable performance.",
answer: "Yes, BitBox seamlessly integrates with modern development workflows, providing fast and reliable performance.",
},
{
question: "How can I contact support if I need help?",
answer:
"You can reach out to support through the 'Contact Us' page or by emailing [email protected].",
answer: "You can reach out to support through the 'Contact Us' page or by emailing [email protected].",
},
];


export default FAQ;
2 changes: 1 addition & 1 deletion client/src/component/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ function Navbar(props) {
<ul className="navbar-nav">
<div className="Navbar-Btn-Group">
{/* Add Project */}
<li>{renderUploadButton()}</li>


{/* Dark Mode Toggle Button */}
<li>
Expand Down
198 changes: 110 additions & 88 deletions client/src/component/UploadProject.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { useState } from 'react';
import PropTypes from "prop-types";
import { useNavigate } from 'react-router-dom';


const UploadProject = ({ mode }) => {
const navigate = useNavigate();
const [formData, setFormData] = useState({
Expand All @@ -12,6 +11,7 @@ const UploadProject = ({ mode }) => {
deploymentLink: '',
projectFiles: null,
});
const [isModalOpen, setIsModalOpen] = useState(false);

const handleChange = (e) => {
const { name, value, type, files } = e.target;
Expand Down Expand Up @@ -48,15 +48,13 @@ const UploadProject = ({ mode }) => {
console.log('Project submitted successfully:', data);
navigate('/projects');

// Clear the form after submission
setFormData({
title: '',
description: '',
githubLink: '',
deploymentLink: '',
});

// Optionally, you can redirect the user or display a success message
} catch (error) {
console.error('Error submitting project:', error);
}
Expand All @@ -65,99 +63,123 @@ const UploadProject = ({ mode }) => {
const themeStyles = mode === 'dark' ? 'bg-gray-800 text-white' : 'bg-white text-gray-900';

return (
<div className={`container mx-auto p-6 mt-40 mb-12 max-w-3xl shadow-lg rounded-lg ${themeStyles}`}>
<h1 className={`text-4xl font-bold text-center mb-8 ${mode === 'dark' ? 'text-white' : 'text-gray-900'}`}>
Upload Your Project
</h1>

<form onSubmit={handleSubmit} className="space-y-6">
{/* Project Title */}
<div>
<label htmlFor="title" className={`block text-lg font-medium ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
Project Title
</label>
<input
type="text"
id="title"
name="title"
value={formData.title}
onChange={handleChange}
className={`w-full mt-2 p-3 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
placeholder="Enter your project title"
required
/>
</div>

{/* Project Description */}
<div>
<label htmlFor="description" className={`block text-lg font-medium ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
Project Description
</label>
<textarea
id="description"
name="description"
value={formData.description}
onChange={handleChange}
className={`w-full mt-2 p-3 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
placeholder="Enter a brief description of your project"
rows="4"
required
></textarea>
</div>

{/* GitHub Link */}
<div>
<label htmlFor="githubLink" className={`block text-lg font-medium ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
GitHub Link
</label>
<input
type="url"
id="githubLink"
name="githubLink"
value={formData.githubLink}
onChange={handleChange}
className={`w-full mt-2 p-3 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
placeholder="Enter your project GitHub link"
required
/>
</div>

{/* Deployment Link */}
<div>
<label htmlFor="deploymentLink" className={`block text-lg font-medium ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
Deployment Link (Optional)
</label>
<input
type="url"
id="deploymentLink"
name="deploymentLink"
value={formData.deploymentLink}
onChange={handleChange}
className={`w-full mt-2 p-3 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
placeholder="Enter your project live demo link"
/>
</div>



{/* Submit Button */}
<div className="text-center">
<button
type="submit"
className={`w-full py-3 rounded-md text-lg font-semibold ${mode === 'dark' ? 'bg-blue-700 hover:bg-blue-600' : 'bg-blue-600 hover:bg-blue-700'} text-white focus:outline-none focus:ring-2 focus:ring-blue-400`}
<div className="container mx-auto flex justify-center">
{/* Button to open the modal */}
<button
onClick={() => setIsModalOpen(true)}
className="bg-blue-600 text-white py-2 px-4 rounded shadow-md hover:bg-blue-700 transition duration-300"
>
Upload Project
</button>

{/* Modal Overlay */}
{isModalOpen && (
<div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
{/* Modal Content */}
<div
className={`relative w-full max-w-md p-6 mx-2 my-8 bg-white rounded-lg shadow-lg overflow-auto ${themeStyles}`}
style={{ maxHeight: '800px', fontSize: '14px' }}
>
Upload Project
</button>
{/* Close Button in Top Right */}
<button
onClick={() => setIsModalOpen(false)}
className="absolute top-0 right-10 text-gray-500 hover:text-gray-700"
style={{ fontSize: '42px' }}
>
&times;
</button>

<h1 className={`text-3xl font-bold text-center mt-6 mb-6 ${mode === 'dark' ? 'text-white' : 'text-gray-900'}`}>
Upload Your Project
</h1>

<form onSubmit={handleSubmit} className="space-y-4">
{/* Project Title */}
<div>
<label htmlFor="title" className={`block text-lg font-semibold ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
Project Title
</label>
<input
type="text"
id="title"
name="title"
value={formData.title}
onChange={handleChange}
className={`w-full mt-1 p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
placeholder="Enter your project title"
required
/>
</div>

{/* Project Description */}
<div>
<label htmlFor="description" className={`block text-lg font-semibold ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
Project Description
</label>
<textarea
id="description"
name="description"
value={formData.description}
onChange={handleChange}
className={`w-full mt-1 p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
placeholder="Enter a brief description of your project"
rows="3"
required
></textarea>
</div>

{/* GitHub Link */}
<div>
<label htmlFor="githubLink" className={`block text-lg font-semibold ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
GitHub Link
</label>
<input
type="url"
id="githubLink"
name="githubLink"
value={formData.githubLink}
onChange={handleChange}
className={`w-full mt-1 p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
placeholder="Enter your project GitHub link"
required
/>
</div>

{/* Deployment Link */}
<div>
<label htmlFor="deploymentLink" className={`block text-lg font-semibold ${mode === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
Deployment Link (Optional)
</label>
<input
type="url"
id="deploymentLink"
name="deploymentLink"
value={formData.deploymentLink}
onChange={handleChange}
className={`w-full mt-1 p-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none ${mode === 'dark' ? 'bg-gray-700 text-white border-gray-600' : 'bg-white text-gray-900 border-gray-300'}`}
placeholder="Enter your project live demo link"
/>
</div>

{/* Submit Button */}
<div className="text-center mt-4">
<button
type="submit"
className={`w-full py-2 rounded-md text-lg font-semibold ${mode === 'dark' ? 'bg-blue-700 hover:bg-blue-600' : 'bg-blue-600 hover:bg-blue-700'} text-white focus:outline-none focus:ring-2 focus:ring-blue-400`}
>
Upload Project
</button>
</div>
</form>
</div>
</div>
</form>
)}
</div>
);
};

UploadProject.propTypes = {

mode: PropTypes.string,

};

export default UploadProject;
Loading