+
+
+ );
+}
diff --git a/Website/src/componets/HeroSec.jsx b/Website/src/componets/HeroSec.jsx
new file mode 100644
index 000000000..c0ee6ae8b
--- /dev/null
+++ b/Website/src/componets/HeroSec.jsx
@@ -0,0 +1,88 @@
+import React from "react";
+import icon from "../Image/javascript.png";
+export default function HeroSec({ searchTerm, setSearchTerm }) {
+ const handleChange = (e) => {
+ console.log(e.target.value);
+ setSearchTerm(e.target.value);
+ };
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/Website/src/componets/Navbar.jsx b/Website/src/componets/Navbar.jsx
new file mode 100644
index 000000000..175cb9210
--- /dev/null
+++ b/Website/src/componets/Navbar.jsx
@@ -0,0 +1,110 @@
+import React from "react";
+import icon from "../Image/javascript.png";
+import { Link } from "react-router-dom";
+
+export default function Navbar() {
+ return (
+
+
+
+
+
+
+ + Javascript Mini-Projects +
+ + +
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/Website/src/componets/NewFolder.jsx b/Website/src/componets/NewFolder.jsx
new file mode 100644
index 000000000..3ed124d98
--- /dev/null
+++ b/Website/src/componets/NewFolder.jsx
@@ -0,0 +1,160 @@
+import React, { useState, useEffect } from "react";
+import EmptyIcon from "../Image/empty-folder.png";
+const FoldersComponent = () => {
+ const [previousFolders, setPreviousFolders] = useState([]);
+ const [newFolders, setNewFolders] = useState([]);
+ const [selectedFolder, setSelectedFolder] = useState(null);
+ const [folderName, setFolderName] = useState("");
+ const [folderDescription, setFolderDescription] = useState("");
+
+ useEffect(() => {
+ const fetchFolders = async () => {
+ try {
+ const response = await fetch(
+ "https://server-2h82.onrender.com/api/folder"
+ );
+ const data = await response.json();
+ const folderdata = await data.folders;
+ const previousFolders = folderdata.map((folder) => ({
+ name: folder.name,
+ html_url: folder.html_url,
+ }));
+ setPreviousFolders(previousFolders);
+
+ const githubResponse = await fetch(
+ "https://api.github.com/repos/thinkswell/javascript-mini-projects/contents"
+ );
+ const githubData = await githubResponse.json();
+ const latestFolders = githubData.filter(
+ (item) => item.type === "dir" && !item.name.startsWith(".github")
+ );
+ const newFolders = latestFolders.filter(
+ (folder) =>
+ !previousFolders.some(
+ (prevFolder) => prevFolder.name === folder.name
+ )
+ );
+ console.log(newFolders);
+ setNewFolders(newFolders);
+ } catch (error) {
+ console.error("Error fetching folders:", error);
+ }
+ };
+
+ fetchFolders();
+ }, []);
+
+ const handleCardClick = (folder) => {
+ setSelectedFolder(folder);
+ setFolderName(folder.name);
+ setFolderDescription(folder.description || "");
+ };
+
+ const handleFormSubmit = async (e) => {
+ console.log(folderName);
+ console.log("heelo" + folderDescription);
+ e.preventDefault();
+ try {
+ const response = await fetch(
+ "https://server-2h82.onrender.com/api/addfolder",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ name: folderName,
+ description: folderDescription,
+ }),
+ }
+ );
+ const data = await response.json();
+ console.log("Folder added:", data);
+ // Reset form and selected folder
+ setFolderName("");
+ setFolderDescription("");
+ setSelectedFolder(null);
+ fetchFolders();
+ } catch (error) {
+ console.error("Error adding folder:", error);
+ }
+ };
+
+ return (
+
+
+ New Folders +
+ {newFolders.length === 0 ? ( +
+ 
+
+ ) : (
+ + No new folders found. +
+ +
+ {newFolders.map((folder) => (
+
+ )}
+
+ {selectedFolder && (
+ handleCardClick(folder)}
+ >
+
+ {folder.name}
+
+
+ ))}
+
+