who-follow component and sidebarSection component

src/components/sidebar-section/index.jsx

@@ -0,0 +1,29 @@
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+export default function SidebarSection({title,children,more}){ 
+    return (
+        <section className="bg-[#16181c] overflow-hidden mb-4 rounded-2xl border border-[#16181c]">
+            <h5 className="py-3 px-4 text-xl font-extrabold leading-6 flex items-center text-[#e7e9ea]">
+                {title}
+            </h5>
+            <div className="grid">
+                {children}
+            </div>
+            {more && (
+                <Link to={more} 
+                className="h-[52px] flex items-center px-4 text-[15px] text-[#1d9bf0] transition-colors hover:bg-white/[0.03]">
+                    Daha fazla göster
+                </Link>
+            )}
+        </section>
+    )
+}
+
+SidebarSection.propTypes = { 
+    title : PropTypes.string.isRequired,
+    children : PropTypes.node.isRequired,
+    more : PropTypes.oneOfType([PropTypes.bool,PropTypes.string])
+}
+SidebarSection.defaultProps = {
+    more:false
+}

src/layouts/main/rightbar/index.jsx

@@ -1,13 +1,14 @@
 import Premium from "~/layouts/main/rightbar/premium";
 import Topics from "~/layouts/main/rightbar/topics";
+import WhoFollow from "~/layouts/main/rightbar/who-follow";
 import Search from "~/layouts/main/rightbar/search";
-
 export default function RightBar (){ 
     return (
         <aside className="w-[350px] mr-2.5">
             <Search />
             <Premium />
             <Topics />
+            <WhoFollow/>
         </aside>
     )
 }

src/layouts/main/rightbar/search/index.jsx

@@ -23,7 +23,7 @@ export default function Search(){
                     <path fill="currentColor" d="M10.25 3.75c-3.59 0-6.5 2.91-6.5 6.5s2.91 6.5 6.5 6.5c1.795 0 3.419-.726 4.596-1.904 1.178-1.177 1.904-2.801 1.904-4.596 0-3.59-2.91-6.5-6.5-6.5zm-8.5 6.5c0-4.694 3.806-8.5 8.5-8.5s8.5 3.806 8.5 8.5c0 1.986-.682 3.815-1.824 5.262l4.781 4.781-1.414 1.414-4.781-4.781c-1.447 1.142-3.276 1.824-5.262 1.824-4.694 0-8.5-3.806-8.5-8.5z" />
                 </svg>
             </div>
-
+            {/** text */}
             <input 
                 type="text" 
                 placeholder="Ara" 

src/layouts/main/rightbar/topics/index.jsx

@@ -1,17 +1,12 @@
+
+import SidebarSection from "~/components/sidebar-section";
 import Topic from "~/layouts/main/rightbar/topics/topic";
 import { topics } from "~/utils/consts";
 
 export default function Topics(){
    return (
-    <section className="bg-[#16181c] mb-4 rounded-2xl border border-[#16181c]">
-        <h5 className="py-3 px-4 text-xl font-extrabold leading-6 flex items-center text-[#e7e9ea]">
-            İlgini çekebilecek gündemler 
-        </h5>
-        <div className="grid">
-        {topics.map((topic, index) => 
-            <Topic key={index} item={topic} />
-        )}
-        </div>
-    </section>
+    <SidebarSection title="İlgini çekebilecek gündemler" more="/trends">
+        {topics.map((topic, index) => <Topic key={index} item={topic} /> )}
+    </SidebarSection>
    )
 }

src/layouts/main/rightbar/topics/topic/index.jsx

@@ -5,8 +5,7 @@ export default function Topic({ item }){
     return (
         <Link 
             to="/"
-            className="py-3 px-4 transition-colors hover:bg-white/[0.03]"
-
+            className="py-3 px-4 transition-colors hover:bg-white/[0.03] relative"
         >
             <div className="text-[13px] text-[#71767b] leading-4">{item.title}</div>
             <div className="text-[15px] font-bold leading-5 mt-0.5">

src/layouts/main/rightbar/who-follow/index.jsx

@@ -0,0 +1,14 @@
+import SidebarSection from "~/components/sidebar-section";
+import { useAccount } from "~/store/auth/hooks";
+
+export default function WhoFollow(){ 
+
+    const account = useAccount();
+
+    return (
+        <SidebarSection title="Kimi takip etmeli"
+        more={`/connect_people?user_id=${account.id}`}>
+
+        </SidebarSection>
+    )
+}