pref: colorful card

src/components/section/card.tsx

@@ -44,6 +44,7 @@ export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragg
       className={clsx(
         "flex flex-col h-500px rounded-2xl bg-blue bg-op-50 p-4 backdrop-blur-5",
         isDragged && "op-50",
+        `bg-${sources[id].color}`,
       )}
       style={{
         transformOrigin: "50% 50%",
@@ -59,17 +60,18 @@ export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragg
 export function CardOverlay({ id }: { id: SourceID }) {
   return (
     <div className={clsx(
-      "flex flex-col h-500px rounded-2xl bg-blue bg-op-50 p-4 backdrop-blur-5",
+      "flex flex-col h-500px rounded-2xl bg-op-50 p-4 backdrop-blur-5",
       "backdrop-blur-5 bg-op-40",
+      `bg-${sources[id].color}`,
     )}
     >
       <div className={clsx("flex justify-between mx-2 mt-0 mb-2 items-center")}>
         <div className="flex gap-2 items-center">
-          <img
-            src={`/icons/${id.split("-")[0]}.png`}
-            className={clsx("h-8 rounded-full")}
-            alt={id}
-            onError={e => e.currentTarget.src = "/icons/default.png"}
+          <div
+            className={clsx("w-8 h-8 rounded-full")}
+            style={{
+              background: `center / contain no-repeat url(/icons/${id.split("-")[0]}.png)`,
+            }}
           />
           <span className="flex flex-col">
             <span className="flex items-center gap-2">
@@ -131,11 +133,11 @@ function NewsCard({ id, inView, handleListeners }: NewsCardProps) {
     <>
       <div className={clsx("flex justify-between mx-2 mt-0 mb-2 items-center")}>
         <div className="flex gap-2 items-center">
-          <img
-            src={`/icons/${id.split("-")[0]}.png`}
-            className={clsx("h-8 rounded-full")}
-            alt={id}
-            onError={e => e.currentTarget.src = "/icons/default.png"}
+          <div
+            className={clsx("w-8 h-8 rounded-full")}
+            style={{
+              background: `center / contain no-repeat url(/icons/${id.split("-")[0]}.png)`,
+            }}
           />
           <span className="flex flex-col">
             <span className="flex items-center gap-2">

src/hooks/useSticky.ts

@@ -0,0 +1,18 @@
+import { useEffect, useRef, useState } from "react"
+
+export function useSticky() {
+  const ref = useRef<HTMLDivElement>(null)
+
+  const [isSticky, setIsSticky] = useState(false)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([event]) => setIsSticky(event.intersectionRatio < 1),
+      { threshold: [1], rootMargin: "-1px 0px 0px 0px" },
+    )
+    observer.observe(ref.current!)
+    return () => observer.disconnect()
+  }, [])
+
+  return { ref, isSticky }
+}

src/routes/__root.tsx

@@ -5,9 +5,12 @@ import "~/styles/globals.css"
 import "virtual:uno.css"
 import type { QueryClient } from "@tanstack/react-query"
 import { Author, Homepage } from "@shared/consts"
+import clsx from "clsx"
+import { useEffect } from "react"
 import { Header } from "~/components/header"
 import { useOnReload } from "~/hooks/useOnReload"
 import { OverlayScrollbar } from "~/components/common/overlay-scrollbar"
+import { useSticky } from "~/hooks/useSticky"
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient
@@ -25,10 +28,20 @@ function NotFoundComponent() {
 
 function RootComponent() {
   useOnReload()
+  const { ref, isSticky } = useSticky()
+  useEffect(() => {
+    console.log(isSticky)
+  }, [isSticky])
   return (
     <>
+      <div className="absolute top-0 z-[-2] h-screen w-screen bg"></div>
       <OverlayScrollbar className="h-full overflow-x-auto relative">
-        <header className="flex justify-between items-center sticky top-0 z-100 bg-base py-4 px-6 md:(pt-8 px-16)">
+        <header
+          ref={ref}
+          className={
+            clsx("flex justify-between items-center py-4 px-8 md:(pt-8 px-20)", "sticky top-0 z-100 backdrop-blur-md")
+          }
+        >
           <Header />
         </header>
         <main className="min-h-[calc(100vh-12rem)] px-6 md:(px-16)">

src/styles/globals.css

@@ -37,10 +37,9 @@ button:disabled {
   --os-handle-bg-active: rgba(255, 255, 255, 0.66);
 }
 
-.card {
-box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.1), 0px 1px 0px 0px rgba(25,28,33,0.02), 0px 0px 0px 1px rgba(25,28,33,0.08);
-}
 
-.dark .card {
-  box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
+.bg {
+  background-image: radial-gradient(ellipse 80% 80% at 50% -30%,
+        rgba(254, 94, 83, 0.3),
+        rgba(255, 255, 255, 0));
 }