style: flowbite contenthub cards + loading + searchform adjustments

AmazeeLabs · Jan 26, 2024 · 3e2c5ac · 3e2c5ac
1 parent 84c64a2
commit 3e2c5ac
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 13 deletions.
diff --git a/packages/ui/src/components/Molecules/Loading.tsx b/packages/ui/src/components/Molecules/Loading.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 export function Loading() {
   return (
     <div className="flex items-center justify-center">
-      <div className="px-3 py-1 text-xs font-medium leading-none text-center text-blue-800 bg-blue-200 rounded-full animate-pulse dark:bg-blue-900 dark:text-blue-200">
+      <div className="my-8 px-3 py-1 text-xs font-medium leading-none text-center text-blue-800 bg-blue-200 rounded-full animate-pulse dark:bg-blue-900 dark:text-blue-200">
         loading...
       </div>
     </div>

diff --git a/packages/ui/src/components/Molecules/SearchForm.tsx b/packages/ui/src/components/Molecules/SearchForm.tsx
@@ -34,7 +34,7 @@ export function SearchForm() {
             navigate(location, { ...values, page: 1 });
           })}
         >
-          <div className="w-full sm:max-w-xs">
+          <div className="mr-2 mb-2 w-full sm:max-w-xs">
             <label htmlFor="keyword" className="sr-only">
               {intl.formatMessage({
                 defaultMessage: 'Keyword',
@@ -43,7 +43,7 @@ export function SearchForm() {
             </label>
             <input
               {...register('keyword')}
-              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus-within:border-gray-300 focus:ring-0"
               placeholder={intl.formatMessage({
                 defaultMessage: 'Keyword',
                 id: 'fe0rMF',
@@ -52,7 +52,7 @@ export function SearchForm() {
           </div>
           <button
             type="submit"
-            className="mt-3 inline-flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:ml-3 sm:mt-0 sm:w-auto"
+            className="mb-2 py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-indigo-600 sm:w-fit hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-600 dark:focus:ring-indigo-600"
           >
             {intl.formatMessage({ defaultMessage: 'Search', id: 'xmcVZ0' })}
           </button>

diff --git a/packages/ui/src/components/Organisms/ContentHub.tsx b/packages/ui/src/components/Organisms/ContentHub.tsx
@@ -23,7 +23,11 @@ export function ContentHub({ pageSize = 10 }: { pageSize: number }) {
     <div className="mx-auto max-w-6xl">
       <SearchForm />
       {error ? (
-        <p className="text-red-500 italic text-center my-8">{error}</p>
+        <div className="flex items-center justify-center">
+          <div className="my-8 px-3 py-1 text-xs font-medium leading-none text-center text-red-500 bg-red-100 rounded-full">
+            {error}
+          </div>
+        </div>
       ) : null}
       {isLoading ? <Loading /> : null}
       {data?.contentHub.total === 0 ? (
@@ -36,14 +40,43 @@ export function ContentHub({ pageSize = 10 }: { pageSize: number }) {
           <ul className="my-8 grid md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
             {data?.contentHub.items.filter(isTruthy).map((item) => (
               <li key={item.path}>
-                <Link href={item.path}>
-                  {item.teaserImage ? (
-                    <Image {...item.teaserImage} className="w-full" />
-                  ) : (
-                    <div className="aspect-[4/3] bg-indigo-200" />
-                  )}
-                  <div className="mt-2 font-bold">{item.title}</div>
-                </Link>
+                <div className="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
+                  <Link href={item.path} className="rounded-t-lg">
+                    {item.teaserImage ? (
+                      <Image {...item.teaserImage} className="w-full" />
+                    ) : (
+                      <div className="aspect-[4/3] bg-indigo-200" />
+                    )}
+                  </Link>
+                  <div className="p-5">
+                    <Link href={item.path}>
+                      <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+                        {item.title}
+                      </h5>
+                    </Link>
+                    <Link
+                      href={item.path}
+                      className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+                    >
+                      Read more
+                      <svg
+                        className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
+                        aria-hidden="true"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 14 10"
+                      >
+                        <path
+                          stroke="currentColor"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M1 5h12m0 0L9 1m4 4L9 9"
+                        />
+                      </svg>
+                    </Link>
+                  </div>
+                </div>
               </li>
             ))}
           </ul>