From cc811298c1109ac142bf19144a6a86395cb96b61 Mon Sep 17 00:00:00 2001
From: Eric Cabrel TIOGO <tericcabrel@yahoo.com>
Date: Sun, 20 Nov 2022 22:25:41 +0100
Subject: [PATCH] style(snippet): complete the ui to browse public snippet

---
 .../queries/resolvers/short-content.ts        | 10 ----
 .../components/snippets/public-snippet.tsx    |  8 ----
 apps/web/src/containers/private/browse.tsx    | 48 ++++++++++++++++---
 packages/front/src/icons/index.tsx            |  6 +++
 4 files changed, 48 insertions(+), 24 deletions(-)
 delete mode 100644 apps/core/src/resources/snippets/queries/resolvers/short-content.ts

diff --git a/apps/core/src/resources/snippets/queries/resolvers/short-content.ts b/apps/core/src/resources/snippets/queries/resolvers/short-content.ts
deleted file mode 100644
index 10cf5a7f..00000000
--- a/apps/core/src/resources/snippets/queries/resolvers/short-content.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Snippet } from '../../../../types/graphql';
-
-const MAX_CONTENT_LINES = 10;
-
-export const shortContentResolver = async (snippet: Snippet): Promise<string> => {
-  const contentAsArray = snippet.content.split('\n');
-  const maxItem = Math.min(MAX_CONTENT_LINES, contentAsArray.length);
-
-  return contentAsArray.slice(0, maxItem).join('\n');
-};
diff --git a/apps/web/src/components/snippets/public-snippet.tsx b/apps/web/src/components/snippets/public-snippet.tsx
index 0fbfefbb..c0d101f8 100644
--- a/apps/web/src/components/snippets/public-snippet.tsx
+++ b/apps/web/src/components/snippets/public-snippet.tsx
@@ -33,14 +33,6 @@ export const PublicSnippet = ({ snippet }: Props) => {
             <div className="text-xs text-gray-400">{snippet.createdAt}</div>
           </div>
         </div>
-        <div>
-          <button
-            className="inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50"
-            type="button"
-          >
-            0 Stars
-          </button>
-        </div>
       </div>
       <div className="ml-12">{snippet.description}</div>
       <div
diff --git a/apps/web/src/containers/private/browse.tsx b/apps/web/src/containers/private/browse.tsx
index 6918ad72..c718aa2b 100644
--- a/apps/web/src/containers/private/browse.tsx
+++ b/apps/web/src/containers/private/browse.tsx
@@ -1,5 +1,8 @@
-import { PublicSnippetResult } from '@sharingan/front';
+import { Button, Icon, PublicSnippetResult } from '@sharingan/front';
+import SelectInput from '@sharingan/front/src/forms/select-input';
+import { SelectOption } from '@sharingan/front/src/typings/components';
 import { NextSeo } from 'next-seo';
+import { useState } from 'react';
 
 import Layout from '@/components/layout/private/layout';
 import { PublicSnippet } from '@/components/snippets/public-snippet';
@@ -8,7 +11,15 @@ type Props = {
   data: PublicSnippetResult;
 };
 
+const sortOptions: SelectOption[] = [
+  { id: 'recently-created', label: 'Sort: recently created' },
+  { id: 'recently-updated', label: 'Sort: recently updated' },
+];
+
 const Browse = ({ data }: Props) => {
+  const [sortOption, setSortOption] = useState<SelectOption>(sortOptions[0]);
+  const [search, setSearch] = useState<string | undefined>();
+
   console.log(data);
 
   const snippets = data.items;
@@ -17,19 +28,44 @@ const Browse = ({ data }: Props) => {
     <Layout>
       <NextSeo title="Browse" />
       <div className="py-10">
-        <header>
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <h1 className="text-3xl font-bold leading-tight text-gray-900">Browse</h1>
-          </div>
-        </header>
         <main>
           <div className="max-w-6xl mx-auto sm:px-6 lg:px-8">
+            <div className="w-full mx-auto border-b border-gray-400 flex justify-between pb-4">
+              <div className="relative mt-1 rounded-md shadow-sm w-1/4">
+                <input
+                  className="block w-full rounded-md border-gray-300 pr-10 sm:text-sm"
+                  id="account-number"
+                  name="account-number"
+                  placeholder="Search..."
+                  type="text"
+                />
+                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                  <Icon.OutlineSearch className="h-5 w-5 text-gray-400" />
+                </div>
+              </div>
+              <SelectInput
+                className="w-1/5 cursor-pointer"
+                options={sortOptions}
+                value={sortOption}
+                onChange={setSortOption}
+              />
+            </div>
             <div className="px-4 py-8 sm:px-0">
               <div className="space-y-6 min-h-96">
                 {snippets.map((snippet) => (
                   <PublicSnippet key={snippet.id} snippet={snippet} />
                 ))}
               </div>
+              <div className="w-full flex justify-center mt-10 space-x-4">
+                <Button className="bg-gray-200 w-auto items-center" color="white-gray">
+                  <Icon.ChevronDoubleLeftIcon className="w-6 h-4" />
+                  Previous
+                </Button>
+                <Button className="bg-gray-200 w-auto items-center" color="white-gray">
+                  Next
+                  <Icon.ChevronDoubleRightIcon className="w-6 h-4" />
+                </Button>
+              </div>
             </div>
           </div>
         </main>
diff --git a/packages/front/src/icons/index.tsx b/packages/front/src/icons/index.tsx
index 383a7df4..7b5e902c 100644
--- a/packages/front/src/icons/index.tsx
+++ b/packages/front/src/icons/index.tsx
@@ -1,6 +1,8 @@
 import {
   CalendarIcon,
   ChartBarIcon,
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
   ChevronDownIcon,
   DocumentAddIcon,
   FolderAddIcon,
@@ -8,6 +10,7 @@ import {
   HomeIcon,
   InboxIcon,
   MenuIcon,
+  SearchIcon,
   UsersIcon,
   XIcon,
 } from '@heroicons/react/outline';
@@ -32,6 +35,8 @@ export default {
   Calendar: CalendarIcon,
   ChartBart: ChartBarIcon,
   Check: CheckIcon,
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
   ChevronDown: ChevronDownIcon,
   Collection: CollectionIcon,
   Cross: CrossIcon,
@@ -49,6 +54,7 @@ export default {
   Logo: LogoIcon,
   LogoLight: LogoLightIcon,
   Menu: MenuIcon,
+  OutlineSearch: SearchIcon,
   ProductHunt: ProductHuntIcon,
   Share: ShareIcon,
   Spinner: SpinnerIcon,