Apis Cataloque page creation

import { NextResponse } from "next/server";

import { cookies } from "next/headers";

import { IApi } from "@/app/utils/interfaces";

export async function GET() {

  try {

    const apiData: IApi[] = [

      {

        id: "a1f9c7e0-2a18-4ea1-9cd1-7c82f43a1e10",

        title: "Edge Cloud Zones Discovery",

        category: "Edge Compute Resources",

        provider: "Intracom Telecom",

        functionalities: ["Registration", "Retrieval"],

        size: 42,

        description:

          "Retrieve available edge cloud zones and their capabilities.",

      },

      {

        id: "e71c64de-4cc3-4de9-9bde-2f92e8f44129",

        title: "Quality on Demand Functions",

        category: "Network QoS",

        provider: "I2Cat",

        functionalities: ["Registration", "Verification", "Retrieval"],

        size: 57,

        description: "Manage QoD sessions.",

      },

      {

        id: "5bcd4b95-76c7-4ad0-8aad-59c0e38dfb77",

        title: "Traffic Influence Functions",

        category: "Network QoS",

        provider: "ISI",

        functionalities: ["Verification", "Retrieval", "Removal"],

        size: 63,

        description: "Manage Traffic Influence sessions.",

      },

      {

        id: "d8a2d8fd-907a-4981-bc34-b3e22c940f13",

        title: "Quality on Demand",

        category: "Network QoS",

        provider: "Intracom Telecom",

        functionalities: ["Registration", "Retrieval"],

        size: 51,

        description: "Manage QoD sessions.",

      },

      {

        id: "f3f2e198-0cc0-43f3-9331-6fd75b0e56a1",

        title: "Traffic Influence",

        category: "Network QoS",

        provider: "I2Cat",

        functionalities: ["Verification", "Removal"],

        size: 48,

        description: "Manage Traffic Influence sessions.",

      },

      {

        id: "a1f9c7e0-2a18-4ea1-9cd1-7c82f4",

        title: "Zones Discovery",

        category: "Edge Compute Resources",

        provider: "Intracom Telecom",

        functionalities: ["Registration", "Retrieval"],

        size: 28,

        description:

          "Retrieve available edge cloud zones and their capabilities. Retrieve available edge cloud zones and their capabilities. Retrieve available edge cloud zones and their capabilities.",

      },

      {

        id: "e71c64de-2f92e8f44129",

        title: "Quality Functions",

        category: "Network QoS",

        provider: "I2Cat",

        functionalities: ["Registration", "Verification", "Retrieval"],

        size: 12,

        description: "Manage QoD sessions.",

      },

      {

        id: "5bcd4b95-76c7-4aad-59c0e38dfb77",

        title: "Influence Functions",

        category: "Network QoS",

        provider: "ISI",

        functionalities: ["Verification", "Retrieval", "Removal"],

        size: 92,

        description: "Manage Traffic Influence sessions.",

      },

      {

        id: "d8a2d8fd-907a-4981-bc322c940f13",

        title: "Demand Functions",

        category: "Network QoS",

        provider: "Intracom Telecom",

        functionalities: ["Registration", "Retrieval"],

        size: 86,

        description: "Manage QoD sessions.",

      },

      {

        id: "f3f2e198-0cc0-43f3-9331-6fd75b0e5",

        title: "Traffic Influence",

        category: "Network QoS",

        provider: "I2Cat",

        functionalities: ["Verification", "Removal"],

        size: 32,

        description: "Manage Traffic Influence sessions.",

      },

    ];

    return NextResponse.json(apiData);

  } catch (error) {

    return NextResponse.json(

      { error: "Internal Server Error" },

      { status: 500 }

    );

  }

}

.container {

  padding: 2rem clamp(0.5rem, 10vw, 10rem);

}

.btnBox{

  display: flex;

  justify-content: flex-end;

}

.back {

  display: inline-block;

  font-size: 0.9rem;

  margin-bottom: 1rem;

  color: #3949ab;

  text-decoration: none;

  &:hover {

    text-decoration: underline;

  }

}

.title {

  font-size: 1.9rem;

  font-weight: 700;

  margin-bottom: 0.3rem;

  color: var(--blue-color);

}

.category {

  font-size: 0.9rem;

  color: var(--orange-color);

  font-weight: 700;

  margin-bottom: 1rem;

}

.functionalities {

  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;

  margin: 0.4rem 0;

}

.badge {

  background: linear-gradient(45deg, #f159225b 0%, #fdbb135b 100%);

  color: var(--blue-color);

  font-size: 0.6rem;

  padding: 0.3rem 0.7rem;

  border-radius: 50px;

  font-weight: 500;

  white-space: nowrap;

  opacity: 0.9;

}

.meta {

  font-size: 0.95rem;

  margin-bottom: 0.5rem;

  strong {

    font-weight: 600;

  }

  small {

    opacity: 0.65;

    margin-left: 3px;

  }

}

.descriptionBox {

  margin-top: 1.5rem;

  h3 {

    margin-bottom: 0.5rem;

  }

  p {

    line-height: 1.5rem;

    color: #333;

  }

}

.notFound {

  padding: 2rem;

  text-align: center;

  a {

    color: #3949ab;

  }

}

 No newline at end of file

import { IApi } from "@/app/utils/interfaces";

import Link from "next/link";

import styles from "./apiPage.module.scss";

import { backArrowIcon } from "@/app/utils/icons";

import buttons from "@/app/styles/buttons.module.scss";

interface ApiPageProps {

  params: { id: string };

}

export default async function ApiPage({ params }: ApiPageProps) {

  const api = {

        id: "a1f9c7e0-2a18-4ea1-9cd1-7c82f4",

        title: "Zones Discovery",

        category: "Edge Compute Resources",

        provider: "Intracom Telecom",

        functionalities: ["Registration", "Retrieval"],

        size: 28,

        description:

          "Retrieve available edge cloud zones and their capabilities. Retrieve available edge cloud zones and their capabilities. Retrieve available edge cloud zones and their capabilities.",

      };

  if (!api) {

    return (

      <div className={styles.notFound}>

        <h2>API Not Found</h2>

        <Link href="/">← Back to APIs</Link>

      </div>

    );

  }

  return (

    <div className={styles.container}>

      <div className={styles.btnBox}>

      <Link href="/" className={buttons.iconSubtle}>

       {backArrowIcon}

      </Link>

      </div>

      <h1 className={styles.title}>{api.title}</h1>

      <p className={styles.category}>{api.category}</p>

      <div className={styles.functionalities}>

        {api.functionalities.map((func: string) => (

          <span key={func} className={styles.badge}>

            {func}

          </span>

        ))}

      </div>

      <p className={styles.meta}>

        <strong>Provider:</strong> {api.provider}

      </p>

      <p className={styles.meta}>

        <strong>Size:</strong> {api.size} <small>MB</small>

      </p>

      <div className={styles.descriptionBox}>

        <h3>Description</h3>

        <p>{api.description}</p>

      </div>

    </div>

  );

}

"use client";

import { IApi } from "@/app/utils/interfaces";

import styles from "./card.module.scss";

import { truncate } from "@/app/utils/helpers";

import Link from "next/link";

export const ApiCard = ({ api }: { api: IApi }) => (

  <Link className={styles.card} href={"./apis/" + api.id}>

    <h2 className={styles.title}>{api.title}</h2>

    <p className={styles.category}>{api.category}</p>

    <div className={styles.functionalities}>

      {api.functionalities.map((func) => (

        <span key={func} className={styles.badge}>

          {func.toLocaleUpperCase()}

        </span>

      ))}

    </div>

    <p className={styles.provider}>

      Provider: <strong>{api.provider}</strong>

    </p>

    <p className={styles.size}>

      Size:<strong> {api.size}</strong> <small>MB</small>

    </p>

    <p className={styles.description}>

      {" "}

      {truncate(api.description, { by: "chars", length: 110 })}

    </p>

  </Link>

);

// .card {

//       background: linear-gradient(314deg, #ffffff 0%, #f4f4f4 100%);

//       padding: 1.5rem;

//       border-radius: 8px;

//       box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.05);

//       height: 14rem;

//       cursor: pointer;

//       transition: all 0.2s ease;

//       &:hover {

//         box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1);

//         transform: translateY(-2px);

//       }

//       h2 {

//         color: var(--blue-color);

//         margin-bottom: 0.25rem;

//         font-size: 1.5rem;

//       }

//       .category {

//         color: var(--orange-color);

//         font-weight: bold;

//         margin-bottom: 0.5rem;

//       }

//     }

.card {

    background: linear-gradient(314deg, #ffffff 0%, #f4f4f4 100%);

    padding: 1.5rem;

    border-radius: 8px;

    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.05);

    display: flex;

    cursor: pointer;

    flex-direction: column;

    gap: 0.6rem;

    transition: all 0.2s ease;

    &:hover {

        box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1);

        transform: translateY(-2px);

    }

    h2 {

        color: var(--blue-color);

        margin-bottom: 0.25rem;

        font-size: 1.5rem;

    }

}

.title {

    font-size: 1.2rem;

    font-weight: 600;

    margin: 0;

}

.category {

    font-size: 0.85rem;

    color: var(--orange-color);

    font-weight: 700;

}

.provider,

.size {

    font-size: 0.85rem;

}

.functionalities {

    display: flex;

    flex-wrap: wrap;

    gap: 0.4rem;

    margin-top: 0.4rem;

}

.badge {

    background: linear-gradient(45deg, #f159225b 0%, #fdbb135b 100%);

    color: var(--blue-color);

    font-size: 0.6rem;

    padding: 0.3rem 0.7rem;

    border-radius: 50px;

    font-weight: 500;

    white-space: nowrap;

    opacity: 0.9;

}

.description {

    font-size: 0.85rem;

    color: #444;

    margin-top: 0.4rem;

    line-height: 1.35rem;

}

 No newline at end of file