feat: enhance Tasks component with selection indicator and update Hero component to display count of ready components

Author: code-env

src/components/animations/tasks.tsx

@@ -138,9 +138,9 @@ const Tasks = () => {
                 key={date.date}
                 layoutId={`day-${date.date}`}
                 className={cn(
-                  "flex flex-col gap-1 items-center hover:bg-muted-foreground/10 rounded-xl p-2 cursor-pointer text-primary/70",
+                  "flex flex-col items-center hover:bg-muted-foreground/10 rounded-xl p-2 cursor-pointer text-primary/70 relative",
                   selected?.date === date.date &&
-                    "bg-muted-foreground/10 text-primary"
+                    "bg-background text-primary border hover:bg-background/80"
                 )}
                 onClick={() => setSelected(date)}
                 whileHover={{ scale: 1.03 }}
@@ -149,6 +149,12 @@ const Tasks = () => {
                 <h2>{date.month}</h2>
                 <p className="font-bold">{date.date}</p>
                 <p>{date.day}</p>
+                {selected?.date === date.date && (
+                  <m.div
+                    className="absolute size-2 bg-red-500 -top-1 rounded-xl bg-background"
+                    layoutId="day-selected-active"
+                  />
+                )}
               </m.div>
             ))}
           </div>

src/components/shared/hero.tsx

@@ -1,11 +1,10 @@
 import { buttonVariants } from "@/components/ui/button";
-import { COMPONENTS } from "@/constants/components";
 import { siteConfig } from "@/lib/config";
 import { motion } from "motion/react";
 import { Icons } from "./icons";
 import Logo from "./logo";
 
-const Hero = ({ hidden }: { hidden: boolean }) => {
+const Hero = ({ hidden, count }: { hidden: boolean; count: number }) => {
   return (
     <div className="w-full md:border-b bg-background">
       <div className="flex flex-col items-center justify-center pt-40 pb-20 gap-10 mx-auto w-full max-w-screen-lg bg-background md:border-x relative">
@@ -25,7 +24,7 @@ const Hero = ({ hidden }: { hidden: boolean }) => {
             className={buttonVariants({ size: "lg", className: "!rounded-md" })}
           >
             <motion.span layoutId="home-chat-button-text">
-              Browse {COMPONENTS.filter((c) => !c.notReady).length} Components
+              Browse {count} Components
             </motion.span>
           </motion.button>
         ) : (

src/constants/components.ts

@@ -1,8 +1,17 @@
 import * as Animated from "@/components/animations";
 
-export const COMPONENTS = [
+type Component = {
+  name: string;
+  component: React.ComponentType<any>;
+  href: string;
+  notReady?: boolean;
+  height?: number;
+};
+
+export const COMPONENTS: Component[] = [
   {
     name: "Task View",
+    notReady: false,
     component: Animated.Tasks,
     href: "https://x.com/alisamadi__/status/1914333366394212708",
   },

src/pages/home.tsx

@@ -11,6 +11,7 @@ import { COMPONENTS } from "@/constants/components";
 const Home = () => {
   const [isHidden, setIsHidden] = useState(false);
   const { scrollY } = useScroll();
+  const readyComponents = COMPONENTS.filter((c) => !c.notReady);
 
   useMotionValueEvent(scrollY, "change", (y) => {
     if (y > 100) {
@@ -23,7 +24,7 @@ const Home = () => {
   return (
     <div className="min-h-screen flex flex-col gap-20 items-center justify-center lg:px-0 px-10 overflow-x-clip">
       <div className="h-screen fixed top-0 max-w-screen-lg inset-x-0 w-full mx-auto border-x border -z-10 candy-bg hidden md:block" />
-      <Hero hidden={isHidden} />
+      <Hero hidden={isHidden} count={readyComponents.length} />
       <Feedback hidden={isHidden} />
       {COMPONENTS.map((component) => (
         <ComponentPreview