feat: add types to icons

Blazity · Oct 23, 2024 · eea6c1d · eea6c1d
1 parent e4671c9
commit eea6c1d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/starters/shopify-meilisearch/components/footer.tsx b/starters/shopify-meilisearch/components/footer.tsx
@@ -114,15 +114,15 @@ export function Footer() {
   )
 }
 
-function FacebookIcon(props) {
+function FacebookIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="black" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
       <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
     </svg>
   )
 }
 
-function InstagramIcon(props) {
+function InstagramIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="black" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
       <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
@@ -132,7 +132,7 @@ function InstagramIcon(props) {
   )
 }
 
-function LinkedinIcon(props) {
+function LinkedinIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="black" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
       <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
@@ -142,15 +142,15 @@ function LinkedinIcon(props) {
   )
 }
 
-function TwitterIcon(props) {
+function TwitterIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="black" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
       <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
     </svg>
   )
 }
 
-function YoutubeIcon(props) {
+function YoutubeIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="black" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
       <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />

diff --git a/starters/shopify-meilisearch/views/homepage/categories-section.tsx b/starters/shopify-meilisearch/views/homepage/categories-section.tsx
@@ -1,8 +1,13 @@
+import { meilisearch } from "clients/search"
 import { CategoryCard } from "components/category-card"
-import { PlatformCollection } from "lib/shopify/types"
+import { unstable_cache } from "next/cache"
+import { env } from "env.mjs"
 import { cn } from "utils/cn"
+import { getDemoCategories, isDemoMode } from "utils/demo-utils"
+
+export async function CategoriesSection() {
+  const categories = await getCategories()
 
-export async function CategoriesSection({ categories }: { categories: Pick<PlatformCollection, "handle" | "title" | "id" | "image">[] }) {
   if (!categories?.length) return null
 
   return (
@@ -30,3 +35,20 @@ export async function CategoriesSection({ categories }: { categories: Pick<Platf
     </div>
   )
 }
+
+const getCategories = unstable_cache(
+  async () => {
+    if (isDemoMode()) return getDemoCategories().slice(0, 4)
+
+    const results = await meilisearch.searchDocuments({
+      indexName: env.MEILISEARCH_CATEGORIES_INDEX,
+      options: {
+        limit: 4,
+      },
+    })
+
+    return results.hits || []
+  },
+  ["categories-section"],
+  { revalidate: 3600 }
+)