Working on the README.md

src/components/wrappers/common/github/github-button.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import {GithubButton} from "@/components/ui/github-button";
+import * as React from "react";
+import {useEffect} from "react";
+
+export const GitHubStarsButtonCustom = () => {
+
+    const [stars, setStars] = React.useState(0);
+    const [isLoading, setIsLoading] = React.useState(true);
+
+    const username = "Soluce-Technologies"
+    const repo = "portabase"
+
+
+    useEffect(() => {
+        fetch(`https://api.github.com/repos/${username}/${repo}`)
+            .then((response) => response.json())
+            .then((data) => {
+                if (data && typeof data.stargazers_count === 'number') {
+                    setStars(data.stargazers_count);
+                }
+            })
+            .catch(console.error)
+            .finally(() => setIsLoading(false));
+    }, [username, repo]);
+
+    if (isLoading) return null;
+
+
+
+    return (
+        <div className=" gap-4 flex-wrap hidden md:block">
+            <GithubButton
+                initialStars={0}
+                targetStars={stars}
+                label="Github Stars"
+                size="sm"
+                separator={true}
+                roundStars={true}
+                repoUrl={`https://github.com/${username}/${repo}`}
+                variant="outline"
+            />
+        </div>
+    );
+};
+export default GitHubStarsButtonCustom;

src/components/wrappers/common/table/table-pagination-size.tsx

@@ -17,7 +17,7 @@ export const TablePaginationSize = (props: tablePaginationSizeProps) => {
 
     return (
         <div className={cn("flex items-center justify-end sm:justify-center space-x-2", className)}>
-            <p className="whitespace-nowrap text-sm font-medium">Rows per page</p>
+            <p className="whitespace-nowrap text-sm font-medium hidden md:block">Rows per page</p>
             <Select
                 value={`${table.getState().pagination.pageSize}`}
                 onValueChange={(value) => {

src/components/wrappers/common/table/table-pagination.tsx

@@ -15,9 +15,9 @@ export function TablePagination(props: tablePaginationProps) {
     const { className, table, maxVisiblePages = 3, pageSizeOptions = [10, 20, 30, 40, 50] } = props;
 
     return (
-        <div className={cn("flex flex-col gap-x-4 sm:flex-row", className)}>
+        <div className={cn("flex gap-x-4 flex-row w-full", className)}>
             <TablePaginationSize table={table} pageSizeOptions={pageSizeOptions} />
-            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages} className="justify-end mt-5 sm:mt-0" />
+            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages} className="justify-end mt-0" />
         </div>
     );
 }