Add frontend view to show frameworks

Author: ACR1209

public/consolidated/_index.json

@@ -37,7 +37,12 @@
     {
         "name": "JAVASCRIPT",
         "icon": "/icons/javascript.svg",
-        "subLanguages": []
+        "subLanguages": [
+            {
+                "name": "REACT",
+                "icon": "/icons/javascript--react.svg"
+            }
+        ]
     },
     {
         "name": "PYTHON",

public/consolidated/cpp.json

@@ -33,7 +33,6 @@
         ]
     },
     {
-        "categoryName": "Debuging",
         "name": "Debugging",
         "snippets": [
             {
@@ -50,6 +49,23 @@
             }
         ]
     },
+    {
+        "name": "Debuging",
+        "snippets": [
+            {
+                "title": "Vector Print",
+                "description": "Overloads the << operator to print the contents of a vector just like in python.",
+                "author": "Mohamed-faaris",
+                "tags": [
+                    "printing",
+                    "debuging",
+                    "vector"
+                ],
+                "contributors": [],
+                "code": "#include <iostream> \n#include <vector>   \n\ntemplate <typename T>\nstd::ostream& operator<<(std::ostream& os, const std::vector<T>& vec) {\n    os << \"[\"; \n    for (size_t i = 0; i < vec.size(); ++i) {\n        os << vec[i]; // Print each vector element\n        if (i != vec.size() - 1) {\n            os << \", \"; // Add separator\n        }\n    }\n    os << \"]\"; \n    return os; // Return the stream\n}\n\n// Usage:\nstd::vector<int> numbers = {1, 2, 3, 4, 5};\nstd::cout << numbers << std::endl; // Outputs: [1, 2, 3, 4, 5]\n\n"
+            }
+        ]
+    },
     {
         "name": "Math And Numbers",
         "snippets": [

public/consolidated/css.json

@@ -1,4 +1,67 @@
 [
+    {
+        "name": "Animations",
+        "snippets": [
+            {
+                "title": "Blink Animation",
+                "description": "Adds an infinite blinking animation to an element",
+                "author": "AlsoKnownAs-Ax",
+                "tags": [
+                    "animation",
+                    "blink",
+                    "infinite"
+                ],
+                "contributors": [],
+                "code": ".blink {\n    animation: blink 1s linear infinite;\n}\n\n@keyframes blink{\n    0%{\n        opacity: 0;\n    }\n    50%{\n        opacity: 1;\n    }\n    100%{\n        opacity: 0;\n    }\n}\n"
+            },
+            {
+                "title": "Pulse Animation",
+                "description": "Adds a smooth pulsing animation with opacity and scale effects",
+                "author": "AlsoKnownAs-Ax",
+                "tags": [
+                    "animation",
+                    "pulse",
+                    "pulse-scale"
+                ],
+                "contributors": [],
+                "code": ".pulse {\n    animation: pulse 2s ease-in-out infinite;\n}\n\n@keyframes pulse {\n  0% {\n    opacity: 0.5;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1.05);\n  }\n  100% {\n    opacity: 0.5;\n    transform: scale(1);\n  }\n}\n"
+            },
+            {
+                "title": "Shake Animation",
+                "description": "Adds a shake animation ( commonly used to mark invalid fields )",
+                "author": "AlsoKnownAs-Ax",
+                "tags": [
+                    "shake",
+                    "shake-horizontal"
+                ],
+                "contributors": [],
+                "code": ".shake {\n    animation: shake .5s ease-in-out;\n}\n\n@keyframes shake {\n  0%, 100% {\n    transform: translateX(0);\n  }\n  25% {\n    transform: translateX(-10px);\n  }\n  50% {\n    transform: translateX(10px);\n  }\n  75% {\n    transform: translateX(-10px);\n  }\n}\n"
+            },
+            {
+                "title": "Slide-in Animation",
+                "description": "Adds a slide-in from the right side of the screen",
+                "author": "AlsoKnownAs-Ax",
+                "tags": [
+                    "animation",
+                    "slide-in",
+                    "slide-right"
+                ],
+                "contributors": [],
+                "code": ".slide-in {\n    animation: slide-in 1s ease-in-out;\n}\n\n@keyframes slide-in {\n    from {\n        scale: 300% 1;\n        translate: 150vw 0;\n    }\n\n    to {\n        scale: 100% 1;\n        translate: 0 0;\n    }\n}\n"
+            },
+            {
+                "title": "Typewriter Animation",
+                "description": "Adds a typewriter animation + blinking cursor",
+                "author": "AlsoKnownAs-Ax",
+                "tags": [
+                    "blinking",
+                    "typewriter"
+                ],
+                "contributors": [],
+                "code": "    <div class=\"typewriter\">\n      <div>\n          <p>Typerwriter Animation</p>\n      </div>\n    </div>\n```\n\n```css\n    .typewriter{\n        display: flex;\n        justify-content: center;\n    }\n\n    .typewriter p {\n        overflow: hidden;\n        font-size: 1.5rem;\n        font-family: monospace;\n        border-right: 1px solid;\n        margin-inline: auto;\n        white-space: nowrap;\n        /* The cursor will inherit the text's color by default */\n        /* border-color: red */                \n        /* Steps: number of chars (better to set directly in js)*/\n        animation: typing 3s steps(21) forwards,\n        blink 1s step-end infinite;\n    }\n\n    @keyframes typing{\n        from{\n            width: 0%\n        }\n        to{\n            width: 100%\n        }\n    }\n\n    @keyframes blink{\n        50%{\n            border-color: transparent;\n        }\n    }\n"
+            }
+        ]
+    },
     {
         "name": "Buttons",
         "snippets": [

public/consolidated/java.json

@@ -1,4 +1,22 @@
 [
+    {
+        "name": "Array Manipulation",
+        "snippets": [
+            {
+                "title": "Zip Two Lists",
+                "description": "Zips two lists into a list of paired elements, combining corresponding elements from both lists.",
+                "author": "davidanukam",
+                "tags": [
+                    "lists",
+                    "zip",
+                    "stream-api",
+                    "collections"
+                ],
+                "contributors": [],
+                "code": "import java.util.*; // Importing utility classes for List and Arrays\nimport java.util.stream.IntStream; // Importing IntStream for range and mapping\nimport java.util.stream.Collectors; // Importing Collectors for collecting stream results\n\npublic <A, B> List<List<Object>> zip(List<A> list1, List<B> list2) {\n    // Create pairs by iterating through the indices of both lists\n    return IntStream.range(0, Math.min(list1.size(), list2.size())) // Limit the range to the smaller list\n            .mapToObj(i -> Arrays.asList(list1.get(i), list2.get(i))) // Pair elements from both lists at index i\n            .collect(Collectors.toList()); // Collect the pairs into a List\n}\n\n// Usage:\nList<String> arr1 = Arrays.asList(\"a\", \"b\", \"c\");\nList<Integer> arr2 = Arrays.asList(1, 2, 3);\nList<List<Object>> zipped = zip(arr1, arr2);\n\nSystem.out.println(zipped); // Output: [[a, 1], [b, 2], [c, 3]]\n"
+            }
+        ]
+    },
     {
         "name": "Basics",
         "snippets": [

public/consolidated/javascript--react.json

@@ -0,0 +1,18 @@
+[
+    {
+        "name": "Basics",
+        "snippets": [
+            {
+                "title": "Hello, World!",
+                "description": "Show Hello World on the page.",
+                "author": "ACR1209",
+                "tags": [
+                    "printing",
+                    "hello-world"
+                ],
+                "contributors": [],
+                "code": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nconst App = () => {\n    return (\n        <div>\n            <h1>Hello, World!</h1>\n        </div>\n    );\n};\n\nReactDOM.render(<App />, document.getElementById('root'));\n"
+            }
+        ]
+    }
+]

public/icons/javascript--react.svg

@@ -0,0 +1,21 @@
+---
+title: Hello, World!
+description: Show Hello World on the page.
+author: ACR1209
+tags: printing,hello-world
+---
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const App = () => {
+    return (
+        <div>
+            <h1>Hello, World!</h1>
+        </div>
+    );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```

snippets/javascript/[react]/basics/hello-world.md

@@ -1,18 +1,28 @@
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState, useMemo } from "react";
 
 import { useAppContext } from "@contexts/AppContext";
 import { useKeyboardNavigation } from "@hooks/useKeyboardNavigation";
 import { useLanguages } from "@hooks/useLanguages";
 import { LanguageType } from "@types";
+import SubLanguageSelector from "./SublanguageSelector";
 
 // Inspired by https://blog.logrocket.com/creating-custom-select-dropdown-css/
 
 const LanguageSelector = () => {
   const { language, setLanguage } = useAppContext();
   const { fetchedLanguages, loading, error } = useLanguages();
+  const allLanguages = useMemo(() => 
+    fetchedLanguages.flatMap((lang) =>
+      lang.subLanguages.length > 0
+        ? [lang, ...lang.subLanguages.map((subLang) => ({ ...subLang, mainLanguage: lang, subLanguages: [] }))]
+        : [lang]
+    ), 
+    [fetchedLanguages]
+  );
 
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
+  const [openedLanguages, setOpenedLanguages] = useState<LanguageType[]>([]);
 
   const handleSelect = (selected: LanguageType) => {
     setLanguage(selected);
@@ -21,8 +31,9 @@ const LanguageSelector = () => {
 
   const { focusedIndex, handleKeyDown, resetFocus, focusFirst } =
     useKeyboardNavigation({
-      items: fetchedLanguages,
-      isOpen,
+      items: allLanguages,
+      isOpen, 
+      openedLanguages,
       onSelect: handleSelect,
       onClose: () => setIsOpen(false),
     });
@@ -38,6 +49,14 @@ const LanguageSelector = () => {
     }, 0);
   };
 
+  const handleOpenedSublanguage = (open: boolean, openedLang: LanguageType) => {
+    if (open) {
+      setOpenedLanguages((prev) => [...prev, openedLang]);
+    } else {
+      setOpenedLanguages((prev) => prev.filter((lang) => lang.name !== openedLang.name));
+    }
+  };
+
   const toggleDropdown = () => {
     setIsOpen((prev) => {
       if (!prev) setTimeout(focusFirst, 0);
@@ -91,21 +110,25 @@ const LanguageSelector = () => {
           tabIndex={-1}
         >
           {fetchedLanguages.map((lang, index) => (
-            <li
-              key={lang.name}
-              role="option"
-              tabIndex={-1}
-              onClick={() => handleSelect(lang)}
-              className={`selector__item ${
-                language.name === lang.name ? "selected" : ""
-              } ${focusedIndex === index ? "focused" : ""}`}
-              aria-selected={language.name === lang.name}
-            >
-              <label>
-                <img src={lang.icon} alt="" />
-                <span>{lang.name}</span>
-              </label>
-            </li>
+            lang.subLanguages.length > 0 ? (
+              <SubLanguageSelector key={index} mainLanguage={lang} afterSelect={()=>{ setIsOpen(false)}} onDropdownChange={handleOpenedSublanguage}/>
+            ) : (
+              <li
+                key={lang.name}
+                role="option"
+                tabIndex={-1}
+                onClick={() => handleSelect(lang)}
+                className={`selector__item ${
+                  language.name === lang.name ? "selected" : ""
+                } ${focusedIndex === index ? "focused" : ""}`}
+                aria-selected={language.name === lang.name}
+              >
+                <label>
+                  <img src={lang.icon} alt="" />
+                  <span>{lang.name}</span>
+                </label>
+              </li>
+            )
           ))}
         </ul>
       )}

snippets/javascript/[react]/icon.svg

@@ -0,0 +1,95 @@
+import { useAppContext } from "@contexts/AppContext";
+import { LanguageType } from "@types";
+import { useEffect, useState } from "react";
+
+type SubLanguageSelectorProps = {
+  mainLanguage: LanguageType;
+  afterSelect: () => void;
+  onDropdownChange: (open: boolean, openedLang: LanguageType) => void;
+};
+
+const SubLanguageSelector = ({
+  mainLanguage,
+  afterSelect,
+  onDropdownChange
+}: SubLanguageSelectorProps) => {
+  const { language, setLanguage } = useAppContext();
+  const [isOpen, setIsOpen] = useState(
+    mainLanguage.subLanguages.some(
+      (subLanguage) => language.name === subLanguage.name
+    )
+  );
+
+  const handleSelect = (selected: LanguageType) => {
+    setLanguage(selected);
+    setIsOpen(false);
+    afterSelect();
+  };
+
+  useEffect(() => {
+    onDropdownChange(isOpen, mainLanguage);
+  }, [isOpen]);
+
+  return (
+    <>
+      <li
+        key={mainLanguage.name}
+        role="option"
+        tabIndex={-1}
+        className={`selector__item ${
+          language.name === mainLanguage.name ? "selected" : ""
+        }`}
+        aria-selected={language.name === mainLanguage.name}
+        onClick={() => setLanguage(mainLanguage)}
+      >
+        <label>
+          <img src={mainLanguage.icon} alt={mainLanguage.name} />
+          <span>{mainLanguage.name}</span>
+          <button
+            className="sublanguage__button"
+            tabIndex={-1}
+            aria-expanded={isOpen}
+            aria-haspopup="listbox"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsOpen(!isOpen);
+            }}
+          >
+            <span className="sublanguage__arrow" />
+          </button>
+        </label>
+      </li>
+
+      {isOpen && (
+        <>
+          {mainLanguage.subLanguages.map((subLanguage) => (
+            <li
+              key={subLanguage.name}
+              role="option"
+              tabIndex={-1}
+              className={`selector__item sublanguage__item ${
+                language.name === subLanguage.name ? "selected" : ""
+              }`}
+              aria-selected={language.name === subLanguage.name}
+              onClick={() => {
+                handleSelect({
+                  ...subLanguage,
+                  mainLanguage: mainLanguage,
+                  subLanguages: [],
+                });
+                setIsOpen(false);
+              }}
+            >
+              <label>
+                <img src={subLanguage.icon} alt={subLanguage.name} />
+                <span>{subLanguage.name}</span>
+              </label>
+            </li>
+          ))}
+        </>
+      )}
+    </>
+  );
+};
+
+export default SubLanguageSelector;