From ee32ce6027e89208e32538c3ba58f3110092e363 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?=
 <osergiosiqueira@gmail.com>
Date: Mon, 21 Apr 2025 20:37:09 -0300
Subject: [PATCH] filter

---
 superpage/src/components/HeaderNav.astro |  29 +++
 superpage/src/components/Pulse.jsx       | 253 -----------------------
 superpage/src/icons/magnifying-glass.svg |   3 +
 3 files changed, 32 insertions(+), 253 deletions(-)
 delete mode 100644 superpage/src/components/Pulse.jsx
 create mode 100644 superpage/src/icons/magnifying-glass.svg

diff --git a/superpage/src/components/HeaderNav.astro b/superpage/src/components/HeaderNav.astro
index 57674f8..604958b 100644
--- a/superpage/src/components/HeaderNav.astro
+++ b/superpage/src/components/HeaderNav.astro
@@ -61,6 +61,35 @@ const courses = await getCollection('courses', ({ data }) => data.draft != true)
 
             <div class="flex max-lg:flex-col gap-2.5 justify-between mb-3.5">
                 <h6 class="font-medium text-xl lg:text-2xl">Conheça outros cursos da EDUSEG&reg;</h6>
+
+                <div class="flex max-lg:flex-col gap-0.5 lg:gap-4">
+                    <!-- Search -->
+                    <label class="flex gap-1 items-center">
+                        <span class="text-nowrap max-lg:w-2/5 text-right">Buscar por</span>
+                        <div
+                            class="flex items-center border rounded px-1.5 py-0.5 lg:px-2 lg:py-1 bg-white/20 focus-within:bg-white w-full transition duration-150"
+                        >
+                            <input class="outline-none w-full" />
+                            <Icon name="magnifying-glass" class="size-5" />
+                        </div>
+                    </label>
+                    <!-- Search End -->
+
+                    <!-- Filter -->
+                    <label class="flex gap-1 items-center">
+                        <span class="text-nowrap max-lg:w-2/5 text-right">Exibir apenas</span>
+                        <div class="relative w-full lg:w-30 bg-white/20">
+                            <select
+                                class="flex border items-center justify-between gap-0.5 border-black rounded px-1.5 py-0.5 lg:px-2 lg:py-1 appearance-none focus:outline-none w-full lowercase"
+                            >
+                                <option value="formacao">Formação</option>
+                                <option value="reciclagem">Reciclagem</option>
+                            </select>
+                            <Icon name="chevron" class="absolute top-2.5 right-2.5 pointer-events-none size-3.5" />
+                        </div>
+                    </label>
+                    <!-- Filder End -->
+                </div>
             </div>
 
             <ul class="list-disc list-inside max-lg:[&_li]:truncate">
diff --git a/superpage/src/components/Pulse.jsx b/superpage/src/components/Pulse.jsx
deleted file mode 100644
index 4389e0c..0000000
--- a/superpage/src/components/Pulse.jsx
+++ /dev/null
@@ -1,253 +0,0 @@
-export function Pulse(props) {
-  return (
-    <svg
-      viewBox="0 0 973 1080"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M473.832 562.531L449.083 551.386C448.408 550.953 447.542 550.953 446.859 551.386L422.11 562.531C420.733 563.405 418.933 562.419 418.933 560.792V487.309C418.941 486.167 419.868 485.241 421.01 485.241H474.949C476.092 485.241 477.018 486.167 477.018 487.309V560.792C477.018 562.419 475.217 563.405 473.841 562.531H473.832Z"
-        stroke="url(#paint0_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M492.032 593.277L449.863 574.287C448.713 573.55 447.238 573.55 446.073 574.287L403.904 593.277C401.559 594.766 398.491 593.086 398.491 590.314V465.11C398.506 463.164 400.084 461.586 402.031 461.586H493.935C495.882 461.586 497.46 463.164 497.46 465.11V590.314C497.46 593.086 494.392 594.766 492.047 593.277H492.032Z"
-        stroke="url(#paint1_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M511.592 628.14L450.701 600.719C449.04 599.654 446.91 599.654 445.228 600.719L384.337 628.14C380.951 630.29 376.521 627.863 376.521 623.86V443.069C376.542 440.259 378.821 437.981 381.632 437.981H514.34C517.151 437.981 519.43 440.259 519.43 443.069V623.86C519.43 627.863 515 630.29 511.613 628.14H511.592Z"
-        stroke="url(#paint2_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M536.741 684.081L451.779 645.82C449.461 644.335 446.489 644.335 444.142 645.82L359.18 684.081C354.455 687.082 348.274 683.695 348.274 678.11V418.448C348.303 414.527 351.483 411.348 355.406 411.348H447.99H540.574C544.497 411.348 547.677 414.527 547.677 418.448V678.11C547.677 683.695 541.496 687.082 536.771 684.081H536.741Z"
-        stroke="url(#paint3_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M564.722 729.385L452.978 679.063C449.93 677.109 446.021 677.109 442.933 679.063L331.19 729.385C324.975 733.331 316.845 728.877 316.845 721.532V389.752C316.885 384.595 321.067 380.414 326.226 380.414H569.764C574.923 380.414 579.105 384.595 579.105 389.752V721.532C579.105 728.877 570.976 733.331 564.761 729.385H564.722Z"
-        stroke="url(#paint4_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M593.093 771.607L454.194 709.057C450.404 706.629 445.546 706.629 441.708 709.057L302.809 771.607C295.085 776.512 284.979 770.976 284.979 761.846V349.44C285.028 343.03 290.226 337.834 296.639 337.834H599.36C605.773 337.834 610.971 343.03 610.971 349.44V761.846C610.971 770.976 600.866 776.512 593.141 771.607H593.093Z"
-        stroke="url(#paint5_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M623.352 824.278L455.491 748.685C450.911 745.75 445.04 745.75 440.401 748.685L272.54 824.278C263.204 830.206 250.992 823.515 250.992 812.481V314.082C251.051 306.335 257.333 300.055 265.083 300.055H630.926C638.676 300.055 644.959 306.335 644.959 314.082V812.481C644.959 823.515 632.746 830.206 623.411 824.278H623.352Z"
-        stroke="url(#paint6_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M654.35 873.823L456.819 784.868C451.43 781.415 444.521 781.415 439.063 784.868L241.532 873.823C230.546 880.798 216.175 872.925 216.175 859.941V273.45C216.245 264.333 223.637 256.944 232.757 256.944H663.262C672.382 256.944 679.775 264.333 679.775 273.45V859.941C679.775 872.925 665.404 880.798 654.419 873.823H654.35Z"
-        stroke="url(#paint7_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M682.916 921.114L458.043 819.846C451.908 815.915 444.043 815.915 437.829 819.846L212.956 921.114C200.45 929.055 184.09 920.092 184.09 905.31V237.637C184.168 227.259 192.584 218.846 202.967 218.846H693.063C703.445 218.846 711.861 227.259 711.861 237.637V905.31C711.861 920.092 695.501 929.055 682.995 921.114H682.916Z"
-        stroke="url(#paint8_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M713.306 972.068L459.345 857.702C452.417 853.262 443.534 853.262 436.517 857.702L182.556 972.068C168.432 981.036 149.956 970.914 149.956 954.221V200.184C150.045 188.463 159.55 178.962 171.275 178.962H724.765C736.49 178.962 745.995 188.463 745.995 200.184V954.221C745.995 970.914 727.518 981.036 713.395 972.068H713.306Z"
-        stroke="url(#paint9_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M748.558 1032.04L460.856 902.478C453.007 897.448 442.944 897.448 434.994 902.478L147.292 1032.04C131.292 1042.2 110.361 1030.73 110.361 1011.82V157.602C110.462 144.324 121.229 133.561 134.512 133.561H761.539C774.822 133.561 785.59 144.324 785.59 157.602V1011.82C785.59 1030.73 764.659 1042.2 748.658 1032.04H748.558Z"
-        stroke="url(#paint10_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M785.576 1097.37L462.442 951.851C453.626 946.202 442.324 946.202 433.395 951.851L110.261 1097.37C92.2904 1108.78 68.7815 1095.9 68.7815 1074.66V115.239C68.8945 100.325 80.9881 88.2367 95.9072 88.2367H800.156C815.076 88.2367 827.169 100.325 827.169 115.239V1074.66C827.169 1095.9 803.66 1108.78 785.689 1097.37H785.576Z"
-        stroke="url(#paint11_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M822.953 1145.33L464.044 986.709C454.252 980.552 441.698 980.552 431.781 986.709L72.872 1145.33C52.9117 1157.76 26.8001 1143.72 26.8001 1120.57V74.7882C26.9256 58.5325 40.358 45.3555 56.9289 45.3555H839.147C855.718 45.3555 869.151 58.5325 869.151 74.7882V1120.57C869.151 1143.72 843.039 1157.76 823.079 1145.33H822.953Z"
-        stroke="url(#paint12_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M864.495 1211.56L465.824 1036.52C454.948 1029.73 441.003 1029.73 429.987 1036.52L31.3159 1211.56C9.14429 1225.28 -19.8601 1209.79 -19.8601 1184.24V30.2317C-19.7207 12.2937 -4.80012 -2.24695 13.6065 -2.24695H882.484C900.89 -2.24695 915.811 12.2937 915.811 30.2317V1184.24C915.811 1209.79 886.806 1225.28 864.635 1211.56H864.495Z"
-        stroke="url(#paint13_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <path
-        d="M910.925 1278.92L467.814 1084.38C455.725 1076.83 440.226 1076.83 427.982 1084.38L-15.1291 1278.92C-39.7722 1294.18 -72.0098 1276.96 -72.0098 1248.56V-34.0846C-71.8548 -54.0221 -55.271 -70.1836 -34.8126 -70.1836H930.918C951.377 -70.1836 967.96 -54.0221 967.96 -34.0846V1248.56C967.96 1276.96 935.723 1294.18 911.08 1278.92H910.925Z"
-        stroke="url(#paint14_radial_1259_3894)"
-        stroke-width="10"
-      />
-      <defs>
-        <radialGradient
-          id="paint0_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint1_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint2_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint3_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint4_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint5_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint6_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint7_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint8_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint9_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint10_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint11_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint12_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint13_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-        <radialGradient
-          id="paint14_radial_1259_3894"
-          cx="0"
-          cy="0"
-          r="1"
-          gradientUnits="userSpaceOnUse"
-          gradientTransform="translate(447.975 494.335) rotate(48.6533) scale(374.6 348.132)"
-        >
-          <stop stop-color="#8CD366" />
-          <stop offset="0.710979" stop-color="#FFCF82" stop-opacity="0.1" />
-        </radialGradient>
-      </defs>
-    </svg>
-  )
-}
diff --git a/superpage/src/icons/magnifying-glass.svg b/superpage/src/icons/magnifying-glass.svg
new file mode 100644
index 0000000..e38b1cf
--- /dev/null
+++ b/superpage/src/icons/magnifying-glass.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+</svg>