From a73f551f95cce9543657779728cf2187763aa0f0 Mon Sep 17 00:00:00 2001
From: Elad Abutbul <eladabutbul61@gmail.com>
Date: Sun, 31 May 2026 02:11:58 +0300
Subject: [PATCH 1/2] add a generic map wrapper

---
 .../SGLListWrapper/SGLListWrapper.tsx         | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/components/SGLListWrapper/SGLListWrapper.tsx

diff --git a/src/components/SGLListWrapper/SGLListWrapper.tsx b/src/components/SGLListWrapper/SGLListWrapper.tsx
new file mode 100644
index 0000000..f52851d
--- /dev/null
+++ b/src/components/SGLListWrapper/SGLListWrapper.tsx
@@ -0,0 +1,33 @@
+import { Fragment } from 'react'
+import type { CSSProperties, Key, ReactNode } from 'react'
+
+interface SGLListWrapperProps<T> {
+  items: T[]
+  renderItem: (item: T) => ReactNode
+  getKey: (item: T) => Key
+  wrapperStyle?: CSSProperties
+  itemStyle?: CSSProperties
+}
+
+export const SGLListWrapper = <T,>({
+  items,
+  renderItem,
+  getKey,
+  wrapperStyle,
+  itemStyle,
+}: SGLListWrapperProps<T>) => {
+  const content = items.map((item) => {
+    const renderedItem = renderItem(item)
+    const key = getKey(item)
+
+    return itemStyle ? (
+      <div key={key} style={itemStyle}>
+        {renderedItem}
+      </div>
+    ) : (
+      <Fragment key={key}>{renderedItem}</Fragment>
+    )
+  })
+
+  return wrapperStyle ? <div style={wrapperStyle}>{content}</div> : <>{content}</>
+}

From 8cabb9912195381dc1b071e01f23631680fdbab9 Mon Sep 17 00:00:00 2001
From: Elad Abutbul <eladabutbul61@gmail.com>
Date: Tue, 2 Jun 2026 15:27:21 +0300
Subject: [PATCH 2/2] implement sgllist

---
 .../SGLListWrapper.tsx => SGLList/SGLList.tsx}      | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)
 rename src/components/{SGLListWrapper/SGLListWrapper.tsx => SGLList/SGLList.tsx} (60%)

diff --git a/src/components/SGLListWrapper/SGLListWrapper.tsx b/src/components/SGLList/SGLList.tsx
similarity index 60%
rename from src/components/SGLListWrapper/SGLListWrapper.tsx
rename to src/components/SGLList/SGLList.tsx
index f52851d..56450f4 100644
--- a/src/components/SGLListWrapper/SGLListWrapper.tsx
+++ b/src/components/SGLList/SGLList.tsx
@@ -1,7 +1,6 @@
-import { Fragment } from 'react'
 import type { CSSProperties, Key, ReactNode } from 'react'
 
-interface SGLListWrapperProps<T> {
+interface SGLListProps<T> {
   items: T[]
   renderItem: (item: T) => ReactNode
   getKey: (item: T) => Key
@@ -9,25 +8,23 @@ interface SGLListWrapperProps<T> {
   itemStyle?: CSSProperties
 }
 
-export const SGLListWrapper = <T,>({
+export const SGLList = <T,>({
   items,
   renderItem,
   getKey,
   wrapperStyle,
   itemStyle,
-}: SGLListWrapperProps<T>) => {
+}: SGLListProps<T>) => {
   const content = items.map((item) => {
     const renderedItem = renderItem(item)
     const key = getKey(item)
 
-    return itemStyle ? (
+    return (
       <div key={key} style={itemStyle}>
         {renderedItem}
       </div>
-    ) : (
-      <Fragment key={key}>{renderedItem}</Fragment>
     )
   })
 
-  return wrapperStyle ? <div style={wrapperStyle}>{content}</div> : <>{content}</>
+  return <div style={wrapperStyle}>{content}</div>
 }