slower animation, show PCB view in trending snippets carousel (#454)

* slower animation, show PCB view in trending snippets carousel * add api base url * trending carousel slowdown and better
tscircuit · Dec 31, 2024 · 01aab7c · 01aab7c
1 parent 623e23a
commit 01aab7c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 20 deletions.
diff --git a/src/components/TrendingSnippetCarousel.tsx b/src/components/TrendingSnippetCarousel.tsx
@@ -4,18 +4,26 @@ import { StarFilledIcon } from "@radix-ui/react-icons"
 import { Link } from "wouter"
 import { Snippet } from "fake-snippets-api/lib/db/schema"
 import { useEffect, useRef, useState } from "react"
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
 
 export const TrendingSnippetCarousel = () => {
   const axios = useAxios()
   const scrollRef = useRef<HTMLDivElement>(null)
   const [isHovered, setIsHovered] = useState(false)
+  const apiBaseUrl = useSnippetsBaseApiUrl()
 
   const { data: trendingSnippets } = useQuery<Snippet[]>(
     "trendingSnippets",
     async () => {
       const response = await axios.get("/snippets/list_trending")
       return response.data.snippets
     },
+    {
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      staleTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
   )
 
   if (!trendingSnippets?.length) return null
@@ -34,25 +42,31 @@ export const TrendingSnippetCarousel = () => {
           ref={scrollRef}
           className="flex gap-6 transition-transform duration-1000 animate-carousel-left"
         >
-          {[...(trendingSnippets ?? [])].map((snippet, i) => (
-            <Link
-              key={`${snippet.snippet_id}-${i}`}
-              href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
-            >
-              <div className="flex-shrink-0 w-[200px] bg-white p-3 rounded-lg shadow-sm border border-gray-200 hover:border-gray-300 transition-colors">
-                <div className="font-medium text-blue-600 mb-1 truncate text-sm">
-                  {snippet.owner_name}/{snippet.unscoped_name}
-                </div>
-                <p className="text-xs text-gray-600 mb-2 line-clamp-2">
-                  {snippet.description || "No description provided"}
-                </p>
-                <div className="flex items-center text-xs text-gray-500">
-                  <StarFilledIcon className="w-3 h-3 mr-1" />
-                  {snippet.star_count || 0} stars
+          {[...(trendingSnippets ?? []), ...(trendingSnippets ?? [])].map(
+            (snippet, i) => (
+              <Link
+                key={`${snippet.snippet_id}-${i}`}
+                href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
+              >
+                <div className="flex-shrink-0 w-[200px] bg-white p-3 py-2 rounded-lg shadow-sm border border-gray-200 hover:border-gray-300 transition-colors">
+                  <div className="font-medium text-blue-600 mb-1 truncate text-sm">
+                    {snippet.owner_name}/{snippet.unscoped_name}
+                  </div>
+                  <div className="mb-2 h-24 w-full bg-black rounded overflow-hidden">
+                    <img
+                      src={`${apiBaseUrl}/snippets/images/${snippet.owner_name}/${snippet.unscoped_name}/pcb.svg`}
+                      alt="PCB preview"
+                      className="w-full h-full object-contain p-2 scale-[3] rotate-45 hover:scale-[3.5] transition-transform"
+                    />
+                  </div>
+                  <div className="flex items-center text-xs text-gray-500">
+                    <StarFilledIcon className="w-3 h-3 mr-1" />
+                    {snippet.star_count || 0} stars
+                  </div>
                 </div>
-              </div>
-            </Link>
-          ))}
+              </Link>
+            ),
+          )}
         </div>
       </div>
     </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -32,14 +32,14 @@ export default {
             transform: "translateX(0)",
           },
           to: {
-            transform: "translateX(-100%)",
+            transform: "translateX(-50%)",
           },
         },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
-        "carousel-left": "slide-left 60s linear infinite",
+        "carousel-left": "slide-left 120s linear infinite",
       },
     },
   },