this is the components that i have written in typescript in next but i want to divide this Homepage into small components where i want to minimize the client component and maximize server component what can i change here

also import { decodeJWT } from "@/services/get_user_info";
import { cookies } from "next/headers"; can be used from server component

please tell me how to break this components


'use client'

import { useState, useEffect } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { BookOpen, Star, CheckCircle, ArrowRight } from "lucide-react"
import Link from "next/link"
import { User } from '@/services/get_user_info'

const getMyRoadmapsInfo = async (id: string, jwt: string | undefined) => {
    const authorization = jwt

    try {
        const response = await fetch(
            `${process.env.NEXT_PUBLIC_SERVER_API}/speck/v1/roadmap/getRoadmapsInfoByUserId/${id}`,
            {
                headers: {
                    Authorization: `Bearer ${authorization}`,
                },
            }
        );
        const jsonResponse = await response.json();
        return jsonResponse.data;
    } catch (error) {
        console.error("Error getting roadmap:", error);
        throw error;
    }
};

interface Course {
    id: number;
    name: string;
    progress: number;
}

interface RoadmapResponseData {
    totalRoadmapIds: { id: number }[];
    completedRoadmapIds: { roadmapId: number }[];
    favoriteRoadmapIds: { roadmapId: number }[];
    courses: Course[];
}

interface RoadmapApiResponse {
    message: string;
    data: RoadmapResponseData;
}


export default function HomePage({ userInfo, jwt }: { userInfo: User | null, jwt: string | undefined }) {

    const [totalRoadmaps, setTotalRoadmaps] = useState<number>(0);
    const [completedRoadmaps, setCompletedRoadmaps] = useState<number>(0);
    const [favoriteRoadmaps, setFavoriteRoadmaps] = useState<number>(0);
    const [courses, setCourses] = useState<{ id: number, name: string, progress: number }[]>([]);
    const [greeting, setGreeting] = useState('');


    useEffect(() => {
        const hour = new Date().getHours();
        if (hour < 5) setGreeting('Happy late night');
        else if (hour < 12) setGreeting('Good Morning');
        else if (hour < 18) setGreeting('Good Afternoon');
        else setGreeting('Good Evening');
    }, []);

    useEffect(() => {
        if (userInfo && userInfo.id) {
            getMyRoadmapsInfo(userInfo.id.toString(), jwt)
                .then((data: RoadmapResponseData) => {
                    setTotalRoadmaps(data.totalRoadmapIds.length);
                    setCompletedRoadmaps(data.completedRoadmapIds.length);
                    setFavoriteRoadmaps(data.favoriteRoadmapIds.length);
                    setCourses(data.courses);
                })
                .catch((error) => {
                    console.error("Error fetching roadmap data:", error);
                });
        }
    }, [userInfo]);

    return (
        <div className="min-h-screen from-background to-muted p-6">
            <main className="container mx-auto space-y-12">
                <section className="text-center space-y-4">
                    <h1 className="text-4xl font-bold tracking-tight">{greeting}, {userInfo?.name}</h1>
                    <p className="text-xl text-muted-foreground">
                        Embark on your AI-powered learning journey today.
                    </p>
                </section>
                {totalRoadmaps !== 0 && courses ? (

                    <>
                        <section className="grid gap-6 md:grid-cols-3">
                            <Link href="/library" passHref>
                                <Card className="hover:shadow-lg transition-shadow cursor-pointer">
                                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                        <CardTitle className="text-sm font-medium">Total Roadmaps</CardTitle>
                                        <BookOpen className="h-4 w-4 text-muted-foreground" />
                                    </CardHeader>
                                    <CardContent>
                                        <div className="text-2xl font-bold">{totalRoadmaps}</div>
                                    </CardContent>
                                </Card>
                            </Link>
                            <Link href="/library" passHref>
                                <Card className="hover:shadow-lg transition-shadow cursor-pointer">
                                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                        <CardTitle className="text-sm font-medium">Completed Roadmaps</CardTitle>
                                        <CheckCircle className="h-4 w-4 text-muted-foreground" />
                                    </CardHeader>
                                    <CardContent>
                                        <div className="text-2xl font-bold">{completedRoadmaps}</div>
                                    </CardContent>
                                </Card>
                            </Link>
                            <Link href="/library" passHref>
                                <Card className="hover:shadow-lg transition-shadow cursor-pointer">
                                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                        <CardTitle className="text-sm font-medium">Favorite Roadmaps</CardTitle>
                                        <Star className="h-4 w-4 text-muted-foreground" />
                                    </CardHeader>
                                    <CardContent>
                                        <div className="text-2xl font-bold">{favoriteRoadmaps}</div>
                                    </CardContent>
                                </Card>
                            </Link>
                        </section>

                        <section className="space-y-6">
                            <h2 className="text-2xl font-semibold tracking-tight">Your Course Progress</h2>
                            <div className="grid gap-4">
                                {courses.map((course) => (
                                    <Link key={course.id} href={`/course/${course.id}`} passHref>
                                        <Card className="hover:shadow-lg transition-shadow cursor-pointer">
                                            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                                                <CardTitle className="text-sm font-medium">{course.name}</CardTitle>
                                                <div className="text-sm text-muted-foreground">{course.progress}%</div>
                                            </CardHeader>
                                            <CardContent>
                                                <Progress value={course.progress} className="w-full" />
                                            </CardContent>
                                        </Card>
                                    </Link>
                                ))}
                            </div>
                        </section>
                    </>
                ) : (
                    <></>
                )}
                <section className="text-center space-y-4">
                    <h2 className="text-2xl font-semibold tracking-tight">Ready to Start Learning?</h2>
                    <p className="text-muted-foreground">
                        Explore our AI-powered roadmaps and accelerate your learning journey.
                    </p>
                    <Button size="lg" className="mt-4">
                        <Link href="/create">Create Roadmap</Link><ArrowRight className="ml-2 h-4 w-4" />
                    </Button>
                </section>
            </main>
        </div>
    )
}




import React from "react";
import HomePage from "./HomePage";
import { decodeJWT } from "@/services/get_user_info";
import { cookies } from "next/headers";


const SpeckHome = () => {

  let userInfo = decodeJWT();
  const authorization = cookies().get("jwtToken")?.value;


  return <HomePage userInfo={userInfo || null} jwt={authorization}></HomePage>
};

export default SpeckHome;