how to update card content on button press?

[errant flame]

import Navbar from "@/components/navbar";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardTitle } from "@/components/ui/card";
import { SignInButton, SignUpButton, SignedIn, UserButton, auth, clerkClient } from "@clerk/nextjs";
import {useUser} from "@clerk/nextjs"
import { Gamepad, PanelsTopLeft, PcCase, Sidebar } from "lucide-react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useLayoutEffect, useRef, useState } from "react";

export default function ProjectsPage() {

  let currentCategory = "Placeholder"

  const router = useRouter()

  const categories = [
    {
      name: "Web",
      icon: PanelsTopLeft,
      bgColor: "bg-green-500/10",
      textColor: "bg-green-500",
    },
    {
      name: "Software",
      icon: PcCase,
      bgColor: "bg-blue-500/10",
      textColor: "bg-blue-500",
    },
    {
      name: "Web",
      icon: Gamepad,
      bgColor: "bg-purple-500/10",
      textColor: "bg-purple-500",
    },

  ]

  const [height, setHeight] = useState(0);
  const elementRef = useRef(null);

  useLayoutEffect(() => {
    const handleResize = () => {
      setHeight(elementRef.current.offsetHeight);
    };
    handleResize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    }
  }, []);

  
  return (
    <div className="flex flex-row justify-center items-center">
      <div className="flex flex-col gap-y-2 bg-red-500 sm:p-5 lg:p-12" style={{ 'height' : height}}>
        <Button >
          Software
        </Button>
        <Button>
          Web Development
        </Button>
        <Button>
          Games Development
        </Button>
      </div>
      <div ref={elementRef} className="w-8/12">
        <Card className="p-5">
          <CardTitle className="text-center py-3">
            Projects - {currentCategory}
          </CardTitle>
          <CardDescription className="text-center py-3 border-b-2 border-slate-500/30">
            Projects I have worked on 
          </CardDescription>
          <CardContent>
          </CardContent>
          <CardFooter>
            Test
          </CardFooter>
        </Card>
      </div>
    </div>
  );
}
``` I have a card here, and i have a sidebar with buttons which are meant to load the content of the card when they are clicked, but i do not know how to do this. I have looked at some solutions and attempted to implement them however it was just a mess so i removed the updated code. Pictures coming

[gritty finch]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)