From 843244604d05ab22d8cf5e760df6253f20c3603d Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 2 Nov 2023 00:40:20 -0300
Subject: [PATCH] Results and order by design implemented

---
 src/frontend/src/pages/StorePage/index.tsx | 36 +++++++++++++++++++---
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 027bd5ba3..3151f64c9 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -255,9 +255,9 @@ export default function StorePage(): JSX.Element {
               </ShadTooltip>
             </div>
           </div>
-          <div className="flex items-center gap-3 text-sm">
+          {/* <div className="flex items-center gap-3 text-sm">
             <button className="flex h-8 items-center justify-between rounded-md border border-ring/60 px-4 py-2 text-sm text-primary hover:bg-muted">
-              <IconComponent name="CheckCircle2" className="mr-2 h-4 w-4" />
+              <IconComponent name="CheckCircle2" className="mr-2 h-4 w-4 " />
               Installed Locally
             </button>
             <Select
@@ -352,7 +352,7 @@ export default function StorePage(): JSX.Element {
                 <SelectItem value="Component">Components</SelectItem>
               </SelectContent>
             </Select>
-          </div>
+          </div> */}
           <div className="flex items-center gap-2">
             {!loading &&
               tags.map((i, idx) => (
@@ -381,8 +381,36 @@ export default function StorePage(): JSX.Element {
                 </Badge>
               ))}
           </div>
+          <div className="flex items-end justify-between">
+            <span className="px-0.5 text-sm text-muted-foreground">
+              2,117 results
+            </span>
+            <Select
+              onValueChange={(value) => {
+                if (value === "Flow") {
+                  filterComponent.current = false;
+                } else if (value === "Component") {
+                  filterComponent.current = true;
+                } else {
+                  filterComponent.current = null;
+                }
+                setPageIndex(1);
+                setPageSize(10);
+                handleGetComponents();
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Order by" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="">Most Popular</SelectItem>
+                <SelectItem value="Flow">Most Recent</SelectItem>
+                <SelectItem value="Component">Alphabetical</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
 
-          <div className="mt-2 grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
             {loading ? (
               <>
                 <SkeletonCardComponent />