update project api and page, set pagination in blog and create content generator component, create blog single page, ui fix

src/components/uikit/button/button.d.ts

@@ -13,8 +13,11 @@ export interface IBaseButtonProps
 
 export interface ITextButtonProps extends IBaseButtonProps {
   endIcon?: IconName;
+  variant?: TButtonVariant;
 }
 export interface IIconButtonProps extends IBaseButtonProps {
   color?: 'primary' | 'secondary';
   size?: 'small' | 'medium' | 'large';
 }
+
+export type TButtonVariant = 'text' | 'solid';

src/components/uikit/button/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-import { IIconButtonProps, ITextButtonProps } from './button';
+import { IIconButtonProps, ITextButtonProps, TButtonVariant } from './button';
 import { Icon } from '../icons';
 import Link from 'next/link';
 
@@ -11,14 +11,20 @@ const Button: React.FC<ITextButtonProps> = ({
   endIcon,
   className,
   link,
+  variant = 'solid',
   onClick,
   ...props
 }) => {
-  const wrapperClass = `group bg-primary relative  h-12 cursor-pointer rounded-[0.5625rem] p-[0.125rem] flex w-fit ${className || ''}`;
+  const wrapperClass = `group relative h-12 cursor-pointer rounded-[0.5625rem] p-[0.125rem] flex w-fit ${className || ''} ${variant === 'solid' ? 'bg-primary' : ''}`;
 
   return link ? (
     <Link href={link} className={wrapperClass} {...props}>
-      <ButtonBody {...props} loading={loading} endIcon={endIcon}>
+      <ButtonBody
+        {...props}
+        loading={loading}
+        endIcon={endIcon}
+        variant={variant}
+      >
         {children}
       </ButtonBody>
     </Link>
@@ -29,17 +35,28 @@ const Button: React.FC<ITextButtonProps> = ({
       onClick={onClick}
       className={wrapperClass}
     >
-      <ButtonBody {...props} loading={loading} endIcon={endIcon}>
+      <ButtonBody
+        {...props}
+        loading={loading}
+        endIcon={endIcon}
+        variant={variant}
+      >
         {children}
       </ButtonBody>
     </button>
   );
 };
 
+const variantClassNames = (variant: TButtonVariant) =>
+  variant === 'solid'
+    ? 'flex items-center justify-center rounded-lg bg-white text-gray-500'
+    : 'text-primary text-base hover:underline';
+
 const ButtonBody: React.FC<ITextButtonProps> = ({
   children,
   loading,
   endIcon,
+  variant = 'solid',
 }) => (
   <div className="flex">
     {loading ? (
@@ -65,11 +82,7 @@ const ButtonBody: React.FC<ITextButtonProps> = ({
       </svg>
     ) : null}
 
-    <div
-      className={`flex items-center justify-center rounded-lg bg-white px-3 text-gray-500`}
-    >
-      {children}
-    </div>
+    <div className={`px-3 ${variantClassNames(variant)}`}>{children}</div>
 
     {endIcon && !loading ? (
       <span className="flex items-center justify-center p-3">