polished ui for mobile browsing

timtbdev · Jun 30, 2023 · d29fa9e · d29fa9e
1 parent f104495
commit d29fa9e
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -16,9 +16,13 @@ An open source sign language dictionary app build with Next.js 13 and Supabase,
 
 ## Demo
 
-https://user-images.githubusercontent.com/28986134/212368288-12f41e37-aa8c-4e0a-a542-cf6d23410a65.mp4
+https://github.com/timtbdev/sign-dictionary/assets/25026241/94ad6311-e0b0-453b-971f-ad4e88130c27
 
-## Tech Stack + Features
+## Google Lighthouse performance statistics
+
+<img width="987" alt="Screenshot 2023-06-29 at 10 02 39 PM" src="https://github.com/timtbdev/sign-dictionary/assets/25026241/6f30f98d-83b6-4bf4-a557-49edb98a8373">
+
+## Tech Stack
 ### Frameworks
 
 - [Next.js](https://nextjs.org/) – React framework for building performant apps with the best developer experience

diff --git a/app/categories/[categoryId]/page.tsx b/app/categories/[categoryId]/page.tsx
@@ -135,7 +135,7 @@ export default async function CategoryPage({ params }: CategoryPageProps) {
         {words?.length && words?.length > 0 ? (
           <ul
             role="list"
-            className="grid grid-cols-2 py-12 gap-6 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4"
+            className="grid grid-cols-1 py-12 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
           >
             {words?.map((word) => (
               <div

diff --git a/components/category/category-wrapper.tsx b/components/category/category-wrapper.tsx
@@ -10,7 +10,7 @@ const CategoryWrapper: FC<CategoryWrapperProps> = ({ children }) => {
       <h3 className="text-lg text-center font-medium text-gray-900">
         Or choose your category
       </h3>
-      <ul role="list" className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <ul role="list" className="mt-4 mx-5 md:mx-0 grid grid-cols-1 gap-4 sm:grid-cols-2">
         {children}
       </ul>
     </div>

diff --git a/components/search/command-menu.tsx b/components/search/command-menu.tsx
@@ -45,7 +45,7 @@ export function CommandMenu({ categories }: CommandMenuProps) {
 
   return (
     <>
-      <div className="max-w-md mx-auto mt-6 sm:flex sm:items-center">
+      <div className="max-w-md mx-8 md:mx-auto mt-6 sm:flex sm:items-center">
         <Button
           variant="outline"
           className={cn(

diff --git a/components/word/word-heading.tsx b/components/word/word-heading.tsx
@@ -2,7 +2,9 @@
 
 import SaveButton from "@/components/shared/save-button";
 import UnSaveButton from "@/components/shared/unsave-button";
+import { shimmer, toBase64 } from "@/lib/utils";
 import { ArrowLeftIcon } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import React from "react";
@@ -12,6 +14,7 @@ interface WordHeadingProps {
   categoryTitle: string;
   categoryId: string;
   wordTitle: string;
+  wordImageUrl: string;
   saved: number;
   userId?: string;
 }
@@ -21,6 +24,7 @@ const WordHeading: React.FC<WordHeadingProps> = ({
   categoryTitle,
   categoryId,
   wordTitle,
+  wordImageUrl,
   saved,
   userId,
 }) => {
@@ -43,13 +47,29 @@ const WordHeading: React.FC<WordHeadingProps> = ({
       </div>
 
       {/* Word */}
-      <div className="flex flex-wrap justify-between items-baseline text-center gap-x-4 bg-white px-4 py-2 md:py-4 lg:py-6 sm:px-6 xl:px-8">
-        <dt className="text-sm w-full text-center font-medium leading-6 text-gray-500">
-          {categoryTitle}
-        </dt>
-        <dd className="w-full flex-none text-3xl font-medium leading-10 tracking-tight text-gray-900">
-          {wordTitle}
-        </dd>
+      <div className="flex flex-row justify-center items-center gap-x-4 bg-white px-4 py-2 md:py-4 lg:py-6 sm:px-6 xl:px-8">
+        <div className="flex flex-wrap items-center">
+          <Image
+            src={wordImageUrl}
+            alt={wordTitle}
+            className="h-16 w-16 rounded-full object-cover shadow-md ring-1 ring-gray-200"
+            width={64}
+            height={64}
+            priority
+            placeholder="blur"
+            blurDataURL={`data:image/svg+xml;base64,${toBase64(
+              shimmer(64, 64)
+            )}`}
+          />
+        </div>
+        <div className="flex flex-col items-center">
+          <dt className="text-sm w-full font-medium leading-6 text-gray-500">
+            {categoryTitle}
+          </dt>
+          <dd className="w-full flex-none text-3xl font-medium leading-10 tracking-tight text-gray-900">
+            {wordTitle}
+          </dd>
+        </div>
       </div>
 
       {/* Save / Unsave button */}

diff --git a/components/word/word-item.tsx b/components/word/word-item.tsx
@@ -11,7 +11,7 @@ import WordHeading from "./word-heading";
 interface WordItemProps {
   word: WordWithCategory;
   saved: number;
-  userId?: string
+  userId?: string;
 }
 
 const WordItem: React.FC<WordItemProps> = ({ word, saved, userId }) => {
@@ -24,6 +24,7 @@ const WordItem: React.FC<WordItemProps> = ({ word, saved, userId }) => {
         categoryTitle={word.categories.title}
         categoryId={word.categories.id}
         wordTitle={word.title}
+        wordImageUrl={word.image}
         saved={saved}
         userId={userId}
       />