Component adding logic (#4)

- adden a filter to search for components - adden a contrubutor notice with mobile hover replacement - added some responsiveness - added a variant to get more space for the component - reorganized some files
FabDonRixos · Oct 26, 2024 · 74541f1 · 74541f1
2 parents c8aa0b8 + 0d81de3
commit 74541f1
Show file tree

Hide file tree

Showing 10 changed files with 368 additions and 48 deletions.
diff --git a/.github/ISSUE_TEMPLATE/COMPONENT-REQUEST.yml b/.github/ISSUE_TEMPLATE/COMPONENT-REQUEST.yml
@@ -20,6 +20,8 @@ body:
         - "Icons"
         - "Animations"
         - "Illustrations"
+        - "Simple"
+        - "Complex"
         - "3D"
         - "Text Art"
         - "Scenes"
@@ -31,7 +33,6 @@ body:
         - "Holidays"
         - "Seasonal"
         - "Graphics"
-        - "IDEs"
         - "Games"
         - "Film / Series / Videos"
         - "Pixel Art"

diff --git a/.github/ISSUE_TEMPLATE/Component-IN-PROGRESS.yml b/.github/ISSUE_TEMPLATE/Component-IN-PROGRESS.yml
@@ -20,6 +20,8 @@ body:
         - "Icons"
         - "Animations"
         - "Illustrations"
+        - "Simple"
+        - "Complex"
         - "3D"
         - "Text Art"
         - "Scenes"
@@ -31,7 +33,6 @@ body:
         - "Holidays"
         - "Seasonal"
         - "Graphics"
-        - "IDEs"
         - "Games"
         - "Film / Series / Videos"
         - "Pixel Art"

diff --git a/logo.sketch → logo/logo.sketch b/logo.sketch → logo/logo.sketch
diff --git a/logo_with_text.svg → logo/logo_with_text.svg b/logo_with_text.svg → logo/logo_with_text.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,16 +1,81 @@
 import Header from "./components/header/Header.tsx";
-import Template from "./artworks/1_Template/Template.tsx";
+import {CSSProperties, useState} from "react";
+import {EArtworkTags} from "./artworks/0_artworks-list/artworkTags.ts";
+import artworksList from "./artworks/0_artworks-list/artworksList.tsx";
 
 function App() {
+    const [currentTag, setCurrentTag] = useState<EArtworkTags>();
+    const [search, setSearch] = useState("");
 
-  return (
-    <>
-      <Header/>
-        <div className={"container"}>
-            <Template />
-        </div>
-    </>
-  )
+    const filteredArtworks = artworksList
+        .filter(artwork => currentTag ? artwork.tags?.includes(currentTag) : true)
+        .filter(artwork => search
+            ? (
+                artwork.tags?.some(tag => tag.toLowerCase().includes(search.toLowerCase())) ||
+                artwork.titel.toLowerCase().includes(search.toLowerCase()) ||
+                artwork.description.toLowerCase().includes(search.toLowerCase()) ||
+                artwork.gitHubName.toLowerCase().includes(search.toLowerCase()) ||
+                artwork.editedAt?.toLocaleDateString().toLowerCase().includes(search.toLowerCase())
+            )
+            : true
+        );
+
+    return (
+        <>
+            <Header
+                setCurrentTag={setCurrentTag}
+                setSearch={setSearch}
+                currentTag={currentTag}
+                search={search}
+            />
+            <div className={"container"}>
+                <div className={"component-list"}>
+                    {filteredArtworks.length > 0 ?
+                        filteredArtworks.map(artwork =>
+                            <div
+                                key={artworksList.indexOf(artwork)}
+                                className={`component${artwork.full ? " full" : ""}`}
+                                style={
+                                    artwork.backgroundColor && artwork.backgroundColor.length <= 7
+                                        ? {"--background-color": artwork.backgroundColor} as CSSProperties
+                                        : {"--background-color": "#000000"} as CSSProperties
+                                }
+                            >
+                                <div className={"content"}>
+                                    {artwork.component}
+                                </div>
+                                <div className={"contribution"}>
+                                    <div className={"component-creator"}>
+                                        <a href={`https://github.com/${artwork.gitHubName}/`} target={"_blank"}>
+                                            <span>© {artwork.gitHubName}</span>
+                                        </a>
+
+                                        {artwork.oneLink &&
+                                            <a href={artwork.oneLink.href} target={"_blank"}>
+                                                {artwork.oneLink.name}
+                                            </a>
+                                        }
+                                    </div>
+                                    <h1>{artwork.titel}</h1>
+                                    {artwork.editedAt && <span>{artwork.editedAt.toLocaleDateString()}</span>}
+                                </div>
+                            </div>
+                        ) : (
+                            <div className={"no-components-found"}>
+                                <span>No Components where found corresponding to the current filter settings.</span>
+                                <button onClick={() => {
+                                    setCurrentTag(undefined);
+                                    setSearch("");
+                                }}>
+                                    Reset Filters
+                                </button>
+                            </div>
+                        )
+                    }
+                </div>
+            </div>
+        </>
+    )
 }
 
 export default App
diff --git a/src/artworks/0_artworks-list/artworkTags.ts b/src/artworks/0_artworks-list/artworkTags.ts
@@ -0,0 +1,25 @@
+export enum EArtworkTags {
+    SHAPES = "Shapes",
+    LOGOS = "Logos",
+    ICONS = "Icons",
+    ANIMATIONS = "Animations",
+    ILLUSTRATIONS = "Illustrations",
+    SIMPLE = "Simple",
+    COMPLEX = "Complex",
+    THREE_D = "3D",
+    TEXT_ART = "Text Art",
+    SCENES = "Scenes",
+    NATURE = "Nature",
+    UNDERWATER = "Underwater",
+    SPACE = "Space",
+    PLANETS = "Planets",
+    ELEMENTS = "Elements",
+    HOLIDAYS = "Holidays",
+    SEASONAL = "Seasonal",
+    GRAPHICS = "Graphics",
+    GAMES = "Games",
+    FILM_SERIES_VIDEOS = "Film / Series / Videos",
+    PIXEL_ART = "Pixel Art",
+    INPUTS = "Inputs (text, button, etc.)",
+    DEV = "DEV"
+}
diff --git a/src/artworks/0_artworks-list/artworksList.tsx b/src/artworks/0_artworks-list/artworksList.tsx
@@ -1,18 +1,39 @@
 import {ReactNode} from "react";
 import Template from "../1_Template/Template.tsx"
+import {EArtworkTags} from "./artworkTags.ts";
+
+export interface ILink {
+    name: string;
+    href: string;
+}
 
 export interface IArtworkItem {
     component: ReactNode;
-    githubName: string;
-    oneLink?: string;
+    titel: string;
+    description: string;
+    gitHubName: string;
+    tags?: EArtworkTags[] | string[]
+    backgroundColor?: `#${string}`;     // No transparent backgrounds
+    full?: boolean;                     // Only use this if you really have no other but to claim more space.
+    oneLink?: ILink;
+    editedAt?: Date;
 }
 
 const artworksList: IArtworkItem[] = [
     {
         component: <Template />,
-        githubName: "FabDonRixos",
-        oneLink: "https://fabian.li"
-    }
+        titel: "circle",
+        description: "round circle",
+        gitHubName: "FabDonRixos",
+        tags: [EArtworkTags.SIMPLE],
+        backgroundColor: "#000",
+        full: true,
+        oneLink: {
+            name: "fabian.li",
+            href: "https://fabian.li"
+        },
+        editedAt: new Date("2024-10-26")
+    },
 ]
 
 export default artworksList;
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -1,33 +1,67 @@
 import {IconLogo, IconFabian, IconGithub, IconLinkedin} from "../../assets/iconLibrary.ts";
 import style from "./header.module.scss";
+import {EArtworkTags} from "../../artworks/0_artworks-list/artworkTags.ts";
 
-export default function Header() {
+interface InputsProps {
+    setCurrentTag: (currentTag: EArtworkTags) => void;
+    setSearch: (search: string) => void;
+    currentTag?: EArtworkTags;
+    search: string;
+}
+
+export default function Header(props: InputsProps) {
 
     return (
         <header className={style.header}>
-            <div className={style.left}>
-                <IconLogo className={style.logo}/>
-                <h1>Awesome Arts</h1>
-            </div>
-            <div className={style.right}>
-                <div className={style.search}>
-
-                </div>
-                <div className={style.filters}>
-
+            <div className={style.top} >
+                <div className={style.left}>
+                    <IconLogo className={style.logo}/>
+                    <h1>Awesome Arts</h1>
                 </div>
-                <div className={style.links}>
-                    <a href="https://github.com/FabDonRixos/awesome-arts" target={"_blank"}>
-                        <IconGithub/>
-                    </a>
-                    <a href="https://www.linkedin.com/in/fabian-mathys-42a595332/" target={"_blank"}>
-                        <IconLinkedin/>
-                    </a>
-                    <a href="https://fabian.li" target={"_blank"}>
-                        <IconFabian/>
-                    </a>
+                <div className={style.right}>
+                    <Inputs {...props} />
+                    <div className={style.links}>
+                        <a href="https://github.com/FabDonRixos/awesome-arts" target={"_blank"}>
+                            <IconGithub/>
+                        </a>
+                        <a href="https://www.linkedin.com/in/fabian-mathys-42a595332/" target={"_blank"}>
+                            <IconLinkedin/>
+                        </a>
+                        <a href="https://fabian.li" target={"_blank"}>
+                            <IconFabian/>
+                        </a>
+                    </div>
                 </div>
             </div>
+            <div className={style.bottom} >
+                <Inputs {...props} />
+            </div>
         </header>
     );
+}
+
+function Inputs({setCurrentTag, setSearch, currentTag, search}: InputsProps) {
+    return (
+        <>
+            <input
+                className={style.search}
+                type="text"
+                placeholder={"Search"}
+                value={search}
+                onChange={e => setSearch(e.target.value)}/>
+
+            <select
+                className={style.filters}
+                name={"tagSelection"}
+                defaultValue={""}
+                value={currentTag}
+                onChange={e => setCurrentTag(e.target.value as EArtworkTags)}
+            >
+                <option value={""}>Select a Tag</option>
+                {Object.entries(EArtworkTags).map(([key, value]) =>
+                    <option key={key} label={key} value={value}/>
+                )}
+            </select>
+        </>
+    )
 }
diff --git a/src/components/header/header.module.scss b/src/components/header/header.module.scss
@@ -1,17 +1,22 @@
 .header {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
   background-color: #121212;
   border-bottom: 1px solid #444444;
   padding: 1rem 2rem;
+}
+
+.top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
   svg {
     width: inherit;
     height: inherit;
   }
 
-  & .left{
+  & .left {
     display: flex;
     align-items: center;
     gap: 1rem;
@@ -20,23 +25,23 @@
       width: 5rem;
       height: 5rem;
     }
-    
-    @media (max-width: 768px) {
+
+    @media (max-width: 403px) {
       & h1 {
         display: none;
       }
     }
   }
 
   & .right {
+    display: flex;
+    gap: 2rem;
     margin-left: 1rem;
 
-    .filters {
-
-    }
-
-    .search {
-
+    @media (max-width: 991px) {
+      & .search, & .filters {
+        display: none;
+      }
     }
 
     .links {
@@ -52,12 +57,35 @@
         &:is(:hover, :active, :focus) {
           color: white;
           outline: none;
+          filter: drop-shadow(3px 5px 5px #03dc00);
         }
 
         &:last-child {
           height: 2.5rem;
         }
+
+        @media (max-width: 767px) {
+          &:not(:first-child) {
+            display: none;
+          }
+        }
       }
     }
   }
+}
+
+.bottom {
+  display: flex;
+  justify-content: end;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 1rem;
+
+  @media (min-width: 992px) {
+    display: none;
+  }
+}
+
+.search, .filters {
+  width: 10rem;
 }