From 366ad21ed1ccec1179ff097702c15d18bf344445 Mon Sep 17 00:00:00 2001
From: headlesdev <damian.bergemann@outlook.com>
Date: Sun, 18 May 2025 13:06:52 +0200
Subject: [PATCH] Save layout

---
 app/dashboard/sites/SitesPage.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/dashboard/sites/SitesPage.tsx b/app/dashboard/sites/SitesPage.tsx
index d2a0d46..be250e5 100644
--- a/app/dashboard/sites/SitesPage.tsx
+++ b/app/dashboard/sites/SitesPage.tsx
@@ -6,6 +6,7 @@ import Sites from "@/components/cards/Sites";
 import axios from "axios";
 import { useEffect, useState, useCallback } from "react";
 import Pagination from "@/components/Pagination";
+import Cookies from "js-cookie";
 
 interface SitesPageProps {
     username: string;
@@ -40,6 +41,13 @@ export default function SitesPage({ username, name }: SitesPageProps) {
         loadSites();
     }, [loadSites]);
 
+    useEffect(() => {
+        const itemPerPage = Cookies.get('sites-itemPerPage');
+        if (itemPerPage) {
+            setItemPerPage(Number(itemPerPage));
+        }
+    }, []);
+    
     return (
         <Sidebar 
             username={username} 
@@ -61,7 +69,10 @@ export default function SitesPage({ username, name }: SitesPageProps) {
 
                 <div className="flex gap-2 items-center pt-4">
                     <input type="text" placeholder="Search..." className="input input-bordered w-full" onChange={(e) => setSearch(e.target.value)} />
-                    <select defaultValue="Pick a font" className="select w-24" onChange={(e) => setItemPerPage(Number(e.target.value))}>
+                    <select defaultValue="Pick a font" className="select w-24" value={itemPerPage} onChange={(e) => {
+                        setItemPerPage(Number(e.target.value));
+                        Cookies.set('sites-itemPerPage', e.target.value);
+                    }}>
                         <option disabled={true}>Layout</option>
                         <option value={5}>List</option>
                         <option value={10}>Grid</option>