Skip to content

Commit

Permalink
Merge pull request #415 from VinayLodhi1712/Uploadproject
Browse files Browse the repository at this point in the history 
Uploadproject UI changes  #415
  • Loading branch information
@Anuj3553
Anuj3553 authored Nov 7, 2024
2 parents 4d5ba4d + fc19d72 commit b2cd20b
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 102 deletions.
1 change: 1 addition & 0 deletions client/package-lock.json
View file

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
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
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
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
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;

0 comments on commit b2cd20b

Please sign in to comment.