diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index f4a9c643..ab986886 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -12,18 +12,17 @@ import { } from "@utils/languageUtils"; import { slugify } from "@utils/slugify"; -import { LeftAngleArrowIcon } from "./Icons"; import SnippetModal from "./SnippetModal"; const SnippetList = () => { const [searchParams, setSearchParams] = useSearchParams(); - const shouldReduceMotion = useReducedMotion(); - + const { fetchedSnippets, loading } = useSnippets(); const { language, subLanguage, snippet, setSnippet } = useAppContext(); - const { fetchedSnippets } = useSnippets(); const [isModalOpen, setIsModalOpen] = useState(false); + const shouldReduceMotion = useReducedMotion(); + const handleOpenModal = (selected: SnippetType) => () => { setIsModalOpen(true); setSnippet(selected); @@ -56,18 +55,29 @@ const SnippetList = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [fetchedSnippets, searchParams]); - if (!fetchedSnippets) { - return ( -

- -

- ); - } + if (loading) return null; return ( <> - + + {fetchedSnippets && fetchedSnippets.length === 0 && ( +

No snippets found for this category. Why not add one? 🚀

+ + Add your own snippet + +

+ )} + {fetchedSnippets.map((snippet, idx) => { const uniqueId = `${language.name}-${snippet.title}-${idx}`; return ( diff --git a/src/styles/main.css b/src/styles/main.css index d0f2a08f..bdafca83 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -221,6 +221,10 @@ abbr { --_flow-space: 2rem; } +.flow:has(.data-empty) { + height: 100%; +} + /* Text */ .main-title { font-size: var(--fs-800); @@ -592,7 +596,7 @@ abbr { * 1. Responsive grid that adjusts columns automatically * Each item has a minimum width of 17.5rem and maximum of 100% */ -.snippets { +.snippets:not(.data-empty) { display: grid; gap: 1.5rem; grid-template-columns: repeat( @@ -631,6 +635,13 @@ abbr { color: var(--clr-text-secondary); } +.category-no-snippets-found { + text-align: center; + font-size: var(--fs-500); + color: var(--clr-text-primary); + padding: 1rem; + height: 100%; +} /*------------------------------------*\ #MODAL \*------------------------------------*/ pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: