added more filter stuff (incomplete) on the TODO

Author: cheddZy

src/components/Content.astro

@@ -2,26 +2,50 @@
 import '../styles/styles.scss';
 import '../styles/globals.scss';
 import Filter from "./ui/Filter.astro";
+import Placeholder from "./Placeholder.astro";
 ---
 
 
 <section>
-    <div>
+    <div id="filterList">
         <Filter/>
     </div>
-    ContentGrid
+    <div id="favorites">
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+    </div>
+    <div id="content">
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+    </div>
 </section>
 
 
 <style>
-
+    #content {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        margin-inline: 4%;
+    }
+    #favorites {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        margin-inline: 4%;
+    }
     section {
         display: flex;
         flex-direction: column;
         align-items: center;
     }
 
-    div {
+    #filterList {
         top: 2rem;
         position: sticky;
         margin:auto;

src/components/Placeholder.astro

@@ -0,0 +1,54 @@
+---
+
+---
+
+
+<div class="wrapper">
+    <div class="blocky animate">
+
+    </div>
+    <div class="texty">
+        <div class="text animate"></div>
+        <div class="text animate"></div>
+        <div class="text animate"></div>
+    </div>
+</div>
+
+<style>
+    .wrapper {
+        width: 24rem;
+        height: 12rem;
+        padding: 1rem;
+
+        display: flex;
+        flex-direction: row;
+        gap: 0.33rem;
+    }
+    .blocky {
+        background-color: #9ca3af;
+        height: 100%;
+        width: 100%;
+        @apply rounded-lg;
+    }
+    .animate {
+        animation: waves 3s infinite;
+    }
+    .texty {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 0.33rem;
+    }
+    .text {
+        width: 100%;
+        height: 1.5rem;
+        background-color: #9ca3af;
+        @apply rounded-md;
+    }
+
+    @keyframes waves {
+        0% {background-color: rgba(156, 163, 175, 0.6);}
+        50% {background-color: rgba(156, 163, 175, 0.2);}
+        100% {background-color: rgba(156, 163, 175, 0.6);}
+    }
+</style>

src/components/buttons/FilterButton.astro

@@ -1,41 +1,19 @@
 ---
 import '../../styles/styles.scss'
 import '../../styles/globals.scss'
-const {buttonText, label, filterChecked} = Astro.props;
+const {buttonText, label, className} = Astro.props;
 ---
 <script>
-    const button = document.getElementById('filterButton');
-
-    button.addEventListener('click', () => {
-        console.log('buttonStatus');
-        switch (buttonStatus) {
-            case 'filterEnabled':
-                button.classList.add('filterDisabled');
-                button.classList.remove('filterEnabled');
-                console.log('yippie!');
-                break;
-            case 'filterDisabled':
-                button.classList.add('filterEnabled');
-                button.classList.remove('filterDisabled');
-                console.log('wahoo');
-                break;
-        }
-    })
 
 </script>
 
-<button class="filterDisabled" id=filterButton aria-label={label}>
+<button class={className} aria-label={label}>
     <a>
             {buttonText}
     </a>
 </button>
 
 <style>
-
-    [data-enabled='enabled'] body {
-        color: red;
-    }
-
     button {
         display: flex;
     }
@@ -48,19 +26,20 @@ const {buttonText, label, filterChecked} = Astro.props;
         @apply duration-100;
 
         font-size: 0.9rem;
+        font-weight: 500;
+        color: rgb(9, 32, 128);
         border: 1px transparent solid;
     }
 
     a:hover {
-        border: 1px rgba(87, 90, 102, 0.2) solid;
+        border: 1px #3574F0 solid;
     }
 
     a:active {
-
-    }
-
-    span:enabled {
-        color: red;
+        color: #F0F1F2;
+        font-weight: 500;
+        background-color: #3574F0;
+        border: 1px transparent solid;
     }
 
 </style>

src/components/buttons/SignUpButton.astro

@@ -40,9 +40,15 @@ const { target, label } = Astro.props;
         outline: 2px transparent solid;
 
     }
+    @keyframes border-anim {
+        0% {outline: 4px rgba(150, 174, 224, 0.25) dotted;}
+        100% {outline: 2px #96aee0 solid;}
+    }
+
     a:hover {
         background: #3574F0;
         outline: 2px #96aee0 solid;
+        animation: border-anim 0.2s 1 ease-out;
     }
     a:active {
         background: #3574F0;

src/components/ui/Filter.astro

@@ -5,30 +5,37 @@ import FilterButton from "../buttons/FilterButton.astro";
 import Searchbox from "./Searchbox.astro";
 ---
 
-<section>
-    <h3>Filter</h3>
-    <div id="filterButtons">
-        <FilterButton buttonText='About'
-                      label='Aria Label'/>
-        <FilterButton buttonText='About'
-                      label='Aria Label'/>
-        <FilterButton buttonText='About'
-                      label='Aria Label'/>
-        <FilterButton buttonText='About'
-                      label='Aria Label'/>
-        <FilterButton buttonText='About'
-                      label='Aria Label'/>
-    </div>
-    <Searchbox/>
-</section>
+<div>
+    <section>
+        <h3>Filter</h3>
+
+        <svg data-slot="icon" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"
+             xmlns="http://www.w3.org/2000/svg">
+            <path clip-rule="evenodd"
+                  d="M3.792 2.938A49.069 49.069 0 0 1 12 2.25c2.797 0 5.54.236 8.209.688a1.857 1.857 0 0 1 1.541 1.836v1.044a3 3 0 0 1-.879 2.121l-6.182 6.182a1.5 1.5 0 0 0-.439 1.061v2.927a3 3 0 0 1-1.658 2.684l-1.757.878A.75.75 0 0 1 9.75 21v-5.818a1.5 1.5 0 0 0-.44-1.06L3.13 7.938a3 3 0 0 1-.879-2.121V4.774c0-.897.64-1.683 1.542-1.836Z"
+                  fill-rule="evenodd"></path>
+        </svg>
+        <div id="filterButtonList">
+            <FilterButton class='filterButton' buttonText='All' label='All content'/>
+            <FilterButton class='filterButton' buttonText='Inspiration' label='Inspiration content'/>
+            <FilterButton class='filterButton' buttonText='Personal' label='Personal websites and portfolios'/>
+            <FilterButton class='filterButton' buttonText='Commerce' label='Commerce website'/>
+            <FilterButton class='filterButton' buttonText='Resources' label='Resource websites'/>
+            <FilterButton class='filterButton' buttonText='Free' label='Free resources'/>
+        </div>
+    </section>
+</div>
 
 <style>
-    #filterButtons {
+    #filterButtonList {
         align-items: center;
         display: flex;
         flex-direction: row;
-        gap: 0.25rem;
+        gap: 0.5rem;
+        flex-wrap: wrap;
     }
+
+
     section {
         min-height: 50px;
         width: 100%;
@@ -37,23 +44,35 @@ import Searchbox from "./Searchbox.astro";
         position: sticky;
         flex-direction: row;
         justify-content: space-between;
-        gap: 6rem;
-        background-color: rgba(213, 220, 242, 0.5);
-        border: rgba(213, 220, 242, 1) 1px solid;
+        background-color: #d1def6;
+        border: #3574F0 1px solid;
         @apply rounded-lg;
         padding: 0 1rem;
+        gap: 0.5rem;
+        overflow-x: clip;
+    }
+
+    .filterButton {
+
+    }
+
+    svg {
+        height: 1.5rem;
+        color: #3574F0;
     }
 
     h3 {
         display: none;
         font-size: 1rem !important;
     }
+
     @media screen and (max-width: 800px) {
         section {
-            flex-direction: column-reverse;
-            gap: 1rem;
+            flex-direction: row;
             padding: 1rem;
+            border-radius: 0;
         }
+
     }