From 32d5c1f7b024ad9c03acb5765a7e1ef320471144 Mon Sep 17 00:00:00 2001 From: Doston Nabotov Date: Fri, 20 Dec 2024 18:49:38 +0200 Subject: [PATCH 001/620] Updated type for new code method --- src/components/CodePreview.tsx | 6 +++--- src/components/SnippetModal.tsx | 2 +- src/types/index.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/CodePreview.tsx b/src/components/CodePreview.tsx index cf62b293..2fb02aab 100644 --- a/src/components/CodePreview.tsx +++ b/src/components/CodePreview.tsx @@ -4,11 +4,11 @@ import CopyToClipboard from "./CopyToClipboard"; type Props = { language: string; - children: string[]; + code: string[]; }; -const CodePreview = ({ language = "markdown", children }: Props) => { - const codeString = children.join("\n"); +const CodePreview = ({ language = "markdown", code }: Props) => { + const codeString = code.join("\n"); return (
diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx index 76dfd674..372c1a64 100644 --- a/src/components/SnippetModal.tsx +++ b/src/components/SnippetModal.tsx @@ -29,7 +29,7 @@ const SnippetModal: React.FC = ({
- {snippet.code} +

Description: {snippet.description} diff --git a/src/types/index.ts b/src/types/index.ts index b4eac550..31b79fe3 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -11,7 +11,7 @@ export type CategoryType = { export type SnippetType = { title: string; description: string; - code: string; + code: string[]; tags: string[]; author: string; }; From a801566fb8a411786656028a754aed0ef4330c1d Mon Sep 17 00:00:00 2001 From: Doston Nabotov Date: Sat, 21 Dec 2024 01:58:58 +0200 Subject: [PATCH 002/620] Added custom selector --- src/components/LanguageSelector.tsx | 95 +++++++++++++++---- src/contexts/AppContext.tsx | 4 +- src/layouts/Banner.tsx | 7 +- src/layouts/Footer.tsx | 20 +--- src/styles/main.css | 138 ++++++++++++++++++++++++++-- 5 files changed, 218 insertions(+), 46 deletions(-) diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx index 6c517f10..28e0004c 100644 --- a/src/components/LanguageSelector.tsx +++ b/src/components/LanguageSelector.tsx @@ -1,19 +1,39 @@ +import React, { useState, useRef } from "react"; import { useAppContext } from "../contexts/AppContext"; import { useLanguages } from "../hooks/useLanguages"; +import { LanguageType } from "../types"; + +// Inspired by https://blog.logrocket.com/creating-custom-select-dropdown-css/ const LanguageSelector = () => { - const { language, setLanguage, setCategory } = useAppContext(); + const { language, setLanguage } = useAppContext(); const { fetchedLanguages, loading, error } = useLanguages(); - const handleLanguageChange = ( - event: React.ChangeEvent - ) => { - const selectedLanguage = fetchedLanguages.find( - (language) => language.lang === event.target.value + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [selectedLanguage, setSelectedLanguage] = + useState(language); + const dropdownRef = useRef(null); + + const handleLanguageChange = (langObj: LanguageType) => { + const selected = fetchedLanguages.find( + (item) => item.lang === langObj.lang ); - if (selectedLanguage) { - setLanguage(selectedLanguage); - setCategory(""); + if (selected) { + setSelectedLanguage(selected); + setLanguage(selected); + setIsDropdownOpen(false); + } + }; + + const toggleDropdown = () => { + setIsDropdownOpen((prev) => !prev); + }; + + const handleKeyDown = (event: React.KeyboardEvent, lang: LanguageType) => { + if (event.key === "Enter") { + handleLanguageChange(lang); + } else if (event.key === "Escape") { + setIsDropdownOpen(false); } }; @@ -26,18 +46,53 @@ const LanguageSelector = () => { } return ( - + + {isDropdownOpen && ( +

+ )} + ); }; diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx index 03651643..3c8bee15 100644 --- a/src/contexts/AppContext.tsx +++ b/src/contexts/AppContext.tsx @@ -3,8 +3,8 @@ import { AppState, LanguageType, SnippetType } from "../types"; // tokens const defaultLanguage: LanguageType = { - lang: "CSS", - icon: "/icons/css.svg", + lang: "JavaScript", + icon: "/icons/javascript.svg", }; // TODO: add custom loading and error handling diff --git a/src/layouts/Banner.tsx b/src/layouts/Banner.tsx index 44f6ff8c..075c1ee2 100644 --- a/src/layouts/Banner.tsx +++ b/src/layouts/Banner.tsx @@ -5,8 +5,11 @@ const Banner = () => { Made to save your time.

- Find the necessary snippet in seconds, across multiple languages. Just - search and copy! + Find code snippets in seconds, across multiple languages. Just{" "} + + search + {" "} + and copy!

); diff --git a/src/layouts/Footer.tsx b/src/layouts/Footer.tsx index bf4cbd4f..0e615c46 100644 --- a/src/layouts/Footer.tsx +++ b/src/layouts/Footer.tsx @@ -9,30 +9,20 @@ const Footer = () => { QuickSnip {" "} - is your go-to collection of handy code snippets, making repetitive - tasks easier and faster for developers across different programming - languages. + is an open-source project that categorizes handy code snippets + across various programming languages.

- Built by{" "} - - Technophile - - , and powered by awesome{" "} + Built with love and powered by an{" "} - community + awesome community - . + . 🚀