add : Github,NoteTaking and Frontend Development Tools

Sumonta056 · Apr 15, 2024 · 1d577de · 1d577de
1 parent b2a47c0
commit 1d577de
Show file tree

Hide file tree

Showing 27 changed files with 292 additions and 26 deletions.
diff --git a/CodeCraft Extension.zip b/CodeCraft Extension.zip
diff --git a/README.md b/README.md
@@ -8,6 +8,7 @@
 CodeCraft Extension is an open-source project that provides A Complete Toolkit for Software Engineering Students. This project is open to contributions.
 
 ![alt text](./assets/image.png)
+![alt text](./assets/image1.png)
 
 </div>
 

diff --git a/assets/image.png b/assets/image.png
diff --git a/assets/image1.png b/assets/image1.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -3,10 +3,14 @@ import IconSection from "./components/Icons-section/Index";
 import FrontendTools from "./components/Frontend-Tools/Index";
 import TailwindTools from "./components/TailwindCSS-Tools/index";
 import ReactUI from "./components/React-UI/index";
+import NoteTaking from "./components/Note-Taking-Tools/index";
+import GitHubTools from "./components/Github-Tools/index";
 import { AiFillBulb } from "react-icons/ai";
 import { GoTools } from "react-icons/go";
 import { FaReact } from "react-icons/fa";
 import { SiTailwindcss } from "react-icons/si";
+import { MdNoteAlt } from "react-icons/md";
+import { FaGithub } from "react-icons/fa";
 import Tools from "./assets/tools.png";
 
 const App = () => {
@@ -32,43 +36,59 @@ const App = () => {
       <div className="flex flex-wrap justify-center p-1 space-x-3">
         <button
           onClick={() => handleViewChange("IconSection")}
-          className={`w-48 justify-center shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] px-4 py-2 rounded  bg-yellow-500 text-white flex gap-2 items-center font-semibold`}
+          className={`w-48 justify-center shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] px-4 py-2 rounded  bg-yellow-500 text-white flex gap-2 items-center font-semibold hover:bg-neutral-700 transform hover:scale-110 transition-transform duration-200`}
         >
           <AiFillBulb style={{ color: "white" }} size={22} />
           Free Icons
         </button>
         <button
           onClick={() => handleViewChange("FrontendTools")}
-          className={`w-48 justify-center px-4 py-2 rounded shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] bg-violet-500 text-white flex gap-2 items-center font-semibold`}
+          className={`w-48 justify-center px-4 py-2 rounded shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] bg-violet-500 text-white flex gap-2 items-center font-semibold hover:bg-neutral-700 transform hover:scale-110 transition-transform duration-200`}
         >
           <GoTools size={22} />
           Frontend Tools
         </button>
 
         <button
           onClick={() => handleViewChange("TailwindTools")}
-          className={`w-48 justify-center px-4 py-2 rounded shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] bg-blue-500 text-white flex gap-2 items-center font-semibold`}
+          className={`w-48 justify-center px-4 py-2 rounded shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] bg-blue-500 text-white flex gap-2 items-center font-semibold hover:bg-neutral-700 transform hover:scale-110 transition-transform duration-200`}
         >
           <SiTailwindcss size={22} />
           TailwindCSS Tools
         </button>
       </div>
 
-      <div className="flex flex-wrap justify-center p-1 space-x-3">
+      <div className="flex flex-wrap justify-center p-1 pt-2 space-x-3">
         <button
           onClick={() => handleViewChange("ReactUI")}
-          className={`w-48 justify-center px-4 py-2 rounded shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] bg-cyan-500 text-white flex gap-2 items-center font-semibold`}
+          className={`w-48 justify-center px-4 py-2 rounded shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] bg-cyan-500 text-white flex gap-2 items-center font-semibold hover:bg-neutral-700 transform hover:scale-110 transition-transform duration-200`}
         >
           <FaReact size={22} />
           React UI Library
         </button>
+        <button
+          onClick={() => handleViewChange("NoteTaking")}
+          className={`w-48 justify-center px-4 py-2 rounded shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] bg-rose-500 text-white flex gap-2 items-center font-semibold hover:bg-neutral-700 transform hover:scale-110 transition-transform duration-200`}
+        >
+          <MdNoteAlt size={22} />
+          Note Taking Tools
+        </button>
+        <button
+          onClick={() => handleViewChange("GitHubTools")}
+          className={`w-48 justify-center px-4 py-2 rounded shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] bg-neutral-500 text-white flex gap-2 items-center font-semibold hover:bg-neutral-700 transform hover:scale-110 transition-transform duration-200`}
+        >
+          <FaGithub size={22} />
+          GitHub Tools
+        </button>
       </div>
 
       <div className="flex flex-wrap justify-center w-full p-1 space-x-5">
         {view === "IconSection" && <IconSection />}
         {view === "FrontendTools" && <FrontendTools />}
         {view === "TailwindTools" && <TailwindTools />}
         {view === "ReactUI" && <ReactUI />}
+        {view === "NoteTaking" && <NoteTaking />}
+        {view === "GitHubTools" && <GitHubTools />}
       </div>
 
       <footer className="flex items-center justify-center w-full gap-1 pt-2 pb-3 mt-auto text-base text-center text-gray-500 text">

diff --git a/src/assets/Freewebsite.png b/src/assets/Freewebsite.png
diff --git a/src/assets/Neumorphism.png b/src/assets/Neumorphism.png
diff --git a/src/assets/cool background.png b/src/assets/cool background.png
diff --git a/src/assets/cssTools1.png b/src/assets/cssTools1.png
diff --git a/src/assets/developer.png b/src/assets/developer.png
diff --git a/src/assets/draw.io.png b/src/assets/draw.io.png
diff --git a/src/assets/eraser.svg b/src/assets/eraser.svg
diff --git a/src/assets/excali.png b/src/assets/excali.png
diff --git a/src/assets/fanceyborder.png b/src/assets/fanceyborder.png
diff --git a/src/assets/flexbox.png b/src/assets/flexbox.png
diff --git a/src/assets/formspree.ico b/src/assets/formspree.ico
diff --git a/src/assets/gitbook.webp b/src/assets/gitbook.webp
diff --git a/src/assets/glassmorphi.png b/src/assets/glassmorphi.png
diff --git a/src/assets/gradient1.png b/src/assets/gradient1.png
diff --git a/src/assets/gradient2.png b/src/assets/gradient2.png
diff --git a/src/assets/grid.png b/src/assets/grid.png
diff --git a/src/assets/roadmap.png b/src/assets/roadmap.png
diff --git a/src/assets/typing.png b/src/assets/typing.png
diff --git a/src/assets/universe.png b/src/assets/universe.png
diff --git a/src/components/Github-Tools/index.jsx b/src/components/Github-Tools/index.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { GitHubTools } from "../../data.js";
+import { FaExternalLinkAlt } from "react-icons/fa";
+
+const Index = () => {
+  return (
+    <div className="grid grid-cols-3 gap-4 px-4 py-2">
+      {GitHubTools.map((icon) => (
+        <div
+          key={icon.id}
+          className="flex flex-col items-center p-4 transition-shadow duration-200 bg-white  hover:bg-orange-200 border rounded  group hover:shadow-lg shadow-[0px_10px_1px_rgba(221,_221,_221,_1),_0_10px_20px_rgba(204,_204,_204,_1)]"
+        >
+          <div className="">{icon.image}</div>
+          {/* Display the icon above the heading */}
+          <h2 className="mt-2 font-bold text-center text-gray-700 text-md">
+            {icon.name}
+          </h2>
+          <p className="mt-1 text-xs text-center text-gray-600">
+            {icon.description}
+          </p>{" "}
+          {/* Display the description under the heading with smaller text */}
+          <a
+            href={icon.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center px-4 py-2 mt-5 text-sm text-white border-2 rounded-md hover:border-violet-400 hover:bg-violet-400 bg-rose-400 border-rose-400 shadow-[rgba(50,50,93,0.25)_0px_6px_12px_-2px,_rgba(0,0,0,0.3)_0px_3px_7px_-3px] "
+          >
+            <FaExternalLinkAlt className="w-3 h-3 mr-1" />
+            Click Here
+          </a>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Index;
diff --git a/src/components/Note-Taking-Tools/index.jsx b/src/components/Note-Taking-Tools/index.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { NoteTaking } from "../../data.js";
+import { FaExternalLinkAlt } from "react-icons/fa";
+
+const Index = () => {
+  return (
+    <div className="grid grid-cols-2 gap-4 px-4 py-2">
+      {NoteTaking.map((icon) => (
+        <div
+          key={icon.id}
+          className="flex flex-col items-center p-4 transition-shadow duration-200 bg-white border rounded  group hover:shadow-lg shadow-[0px_10px_1px_rgba(221,_221,_221,_1),_0_10px_20px_rgba(204,_204,_204,_1)] hover:bg-orange-200"
+        >
+          <div className="">{icon.image}</div>
+          {/* Display the icon above the heading */}
+          <h2 className="mt-2 font-bold text-center text-gray-700 text-md">
+            {icon.name}
+          </h2>
+          <p className="mt-1 text-xs text-center text-gray-600">
+            {icon.description}
+          </p>{" "}
+          {/* Display the description under the heading with smaller text */}
+          <a
+            href={icon.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center px-4 py-2 mt-5 text-sm text-white border-2 rounded-md hover:border-violet-400 hover:bg-violet-400 bg-rose-400 border-rose-400 shadow-[rgba(50,50,93,0.25)_0px_6px_12px_-2px,_rgba(0,0,0,0.3)_0px_3px_7px_-3px] "
+          >
+            <FaExternalLinkAlt className="w-3 h-3 mr-1" />
+            Click Here
+          </a>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Index;