complete profile page + minor UI improvements

    "lint": "eslint"

  },

  "dependencies": {

    "date-fns": "^4.1.0",

    "next": "16.0.5",

    "react": "19.2.0",

    "react-dom": "19.2.0",

  justify-content: flex-end;

}

:global(.rs-divider) {

  margin: 1rem 0;

}

.back {

  display: inline-block;

  font-size: 0.9rem;

.title {

  font-size: 1.9rem;

  font-weight: 700;

  margin-bottom: 0.3rem;

  margin: 0.5rem 0;

  color: var(--blue-color);

}

}

.meta {

  font-size: 0.95rem;

  font-size: 0.85rem;

  margin-bottom: 0.5rem;

  strong {

}

.notFound {

  padding: 2rem;

  text-align: center;

  justify-items: center;

  a {

    color: #3949ab;

}

.infoBox {

  display: flex;

  gap: 2rem;

  justify-content: space-between;

  flex-wrap: wrap;

  .howItWorks {

    max-width: 500px;

  }

}

 No newline at end of file

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

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

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

import { Button } from "rsuite";

import { Button, Divider } from "rsuite";

import { useRouter } from "next/navigation";

interface ApiPageProps {

  params: { id: string };

}

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

  const api = {

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

    title: "Zones Discovery",

import Error from "@/app/components/Error/Error";

import Loader from "@/app/components/Loader/Loader";

import { useState } from "react";

import { format } from "date-fns";

import { StatusChip } from "@/app/components/Chip/StatusChip";

const api: IApi = {

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

  title: "Edge Cloud Zones Discovery",

  category: "Edge Compute Resources",

  provider: "Intracom Telecom",

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

    size: 28,

  size: 42,

  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.",

    "Retrieve available edge cloud zones, including detailed metadata about geographical coverage, compute capacity, and supported service types.",

  protocol: "REST",

  version: "1.4.2",

  status: "Active",

  liveUrl: "https://api.example.com/edge-cloud-zones",

  published: "2023-11-12T10:32:00Z",

  instructions:

    "Use this API to dynamically discover edge zones before deploying compute workloads.",

};

// const api: IApi | null = null;

const ApiPage = () => {

  const router = useRouter();

  const [isLoading, setIsLoading] = useState(false);

  if (isLoading) return <Loader />;

  if (!api) {

  if (!api)

    return (

      <div className={styles.notFound}>

        <h2>API Not Found</h2>

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

      </div>

      <Error href="/" message="No selected Api found" linkText="Back to Home" />

    );

  }

  return (

    <div className={styles.container}>

      <div className={styles.btnBox}>

         <Button

        type="button"

        className={buttons.iconSubtle}

        onClick={() => router.back()}

      >

        <Button className={buttons.iconSubtle} onClick={() => router.back()}>

          {backArrowIcon}

        </Button>

      </div>

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

      <div className={styles.functionalities}>

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

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

            {func.toLocaleUpperCase()}

          </span>

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

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

          //   {func.toLocaleUpperCase()}

          // </span>

          <StatusChip key={idx} status={func} />

        ))}

      </div>

        <h3>Description</h3>

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

      </div>

      <Divider size="sm" label="Api Information" color="#004a8d" />

      <div className={styles.infoBox}>

        <div className={styles.infos}>

          <p className={styles.meta}>

            <strong>Version:</strong> {api.version}

          </p>

          <p className={styles.meta}>

            <strong>Protocol:</strong> {api.protocol}

          </p>

          <p className={styles.meta}>

            <strong>Live URL:</strong> {api.liveUrl}

          </p>

          <p className={styles.meta}>

            <strong>Released Date:</strong>{" "}

            {format(api.published, "dd/MM/yyyy")}

          </p>

          <p className={styles.meta}>

            <strong>Status:</strong> {api.status}

          </p>

        </div>

        <div className={styles.howItWorks}>

          <h3>How it works</h3>

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

        </div>

      </div>

    </div>

  );

}

};

export default ApiPage;

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

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

import Link from "next/link";

import { StatusChip } from "../Chip/StatusChip";

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>

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

        <StatusChip key={idx} status={func} />

      ))}

    </div>

    <p className={styles.provider}>

        return styles.error;

      case "stopped":

        return styles.stopped;

      case "registration":

        return styles.registration;

      case "retrieval":

        return styles.retrieval;

      case "removal":

        return styles.removal;

      default:

        return styles.defaultChip;