pasindu1

  const sortSvg = (column) =>
    sortColumn === column ? (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        width="24"
        height="24"
      >
        {sortOrder === "asc" ? (
          <path d="M7 10l5 5 5-5z" />

pasindu1

  const sortSvg = (column) =>
    sortColumn === column ? (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        width="24"
        height="24"
      >
        {sortOrder === "asc" ? (
          <path d="M7 10l5 5 5-5z" />

pasindu1

  const handleSort = (column) => {
    if (sortColumn === column) {
      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
    } else {
      setSortColumn(column);
      setSortOrder("asc");
    }
  };

pasindu1

 const sortedProducts = [...products].sort((a, b) => {
    if (sortColumn) {
      if (sortOrder === "asc") {
        return a[sortColumn] < b[sortColumn] ? -1 : 1;
      } else {
        return a[sortColumn] > b[sortColumn] ? -1 : 1;
      }
    } else {
      return 0;
    }

pasindu1

"use client";
import { useEffect, useState } from "react";
import { raleway, roboto } from "./fonts";
import React from "react";

export default function Home() {
  const products = [
    {
      id: 1,
      name: "Product 1",

pasindu1

import localFont from 'next/font/local'
// one font with one weight
const myFont = localFont({ src: './my-font.woff2' })

// OR one fonts with multiple weight and styles
const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      weight: '400',

pasindu1

....

<h1 className={`${raleway} font-semibold`}>The new Begining</h1>

....

pasindu1

...
import { raleway, roboto } from "./fonts";
...

...
return (
  <div>
    <h1 className={`${roboto}`}>The new Begining</h1>
    <h1 className={`${raleway}`}>The new Begining</h1>
    <h1>The new Begining</h1>

pasindu1

import { Raleway, Roboto } from "next/font/google";

const raleway_init = Raleway({
  subsets: ["latin"],
  weight: ["600", "400","100"],
});

const roboto_init = Roboto({
  subsets: ["latin"],
  weight: ["400"],

pasindu1

import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,