From de4578a7cc692dc79179710153edadce91ae5897 Mon Sep 17 00:00:00 2001
From: ewsgit <ewsgit@ewsgit.uk>
Date: Tue, 21 Apr 2026 00:18:55 +0000
Subject: [PATCH] Files: preview pane work & mobile support & deselect all support

---
 applications/uk.ewsgit.files/web/App.tsx | 17 ++++++++++++++---
 applications/uk.ewsgit.files/web/layout/Layout.module.scss | 7 +++++++
 applications/uk.ewsgit.files/web/layout/Layout.tsx | 1 -
 applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.module.scss | 11 +++++++++++
 applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.tsx | 64 +++++++++++++++++++++++++++++++++++++++++++++++++++++-----------
 applications/uk.ewsgit.files/web/layout/components/PreviewPane/PreviewPane.module.scss | 24 ++++++++++++++++++++++++
 applications/uk.ewsgit.files/web/layout/components/PreviewPane/PreviewPane.tsx | 55 +++++++++++++++++++++++++++++++++++++------------------
 applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.module.scss | 5 +++++
 applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.tsx | 1 +
 applications/uk.ewsgit.files/web/pages/dir/iconForItemType.ts | 2 +-
 applications/uk.ewsgit.photos/web/pages/gallery/Index.tsx | 342 +++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 uikit-solid/src/components/sideBar/UKSideBar.module.scss | 2 ++
 12 file(s) changed, 206 insertion(s)(+), 325 deletion(s)(-)

diff --git a/applications/uk.ewsgit.files/web/App.tsx b/applications/uk.ewsgit.files/web/App.tsx
--- a/applications/uk.ewsgit.files/web/App.tsx
+++ b/applications/uk.ewsgit.files/web/App.tsx
@@ -2,12 +2,12 @@ import { Route } from "@solidjs/router";
 import { type Accessor, type Component, createSignal, lazy, onMount } from "solid-js";
 import { createStore, type SetStoreFunction, type Store } from "solid-js/store";
 import { AppContext } from "./appContext.ts";
+import ActionBar from "./layout/components/ActionBar/ActionBar.tsx";
+import layoutStyles from "./layout/Layout.module.scss";
 import trpc from "./lib/trpc.ts";
 import View from "./pages/dir/View.tsx";
 import type { ViewItem } from "./pages/dir/viewItem.ts";
 import Redirect from "./Redirect.tsx";
-import ActionBar from "./layout/components/ActionBar/ActionBar.tsx";
-import layoutStyles from "./layout/Layout.module.scss";
 
 const Layout = lazy(() => import("./layout/Layout.tsx"));
 const WelcomePage = lazy(() => import("./pages/welcome/Index.tsx"));
@@ -17,6 +17,7 @@ showWelcome: boolean;
   homePath: string;
   pinnedDirectories: string[];
   viewType: "grid" | "details" | "gallery";
+  showPreview: boolean;
 }
 
 interface ViewState {
@@ -44,6 +45,7 @@ showWelcome: true,
     homePath: "/Users/1/fs/",
     pinnedDirectories: ["/home"],
     viewType: "details",
+    showPreview: true,
   });
   const [viewState, setViewState] = createStore<AppContextType["viewState"]>({
     viewItems: [],
@@ -97,7 +99,16 @@ <>
               <div class={layoutStyles.actionbar}>
                 <ActionBar />
               </div>
-              <View />
+              {/** biome-ignore lint/a11y/noStaticElementInteractions: button functionality not required */}
+              {/** biome-ignore lint/a11y/useKeyWithClickEvents: button functionality not required */}
+              <div
+                class={layoutStyles.viewRoot}
+                onClick={(e) => {
+                  if (e.currentTarget === e.target) setViewState("selectedItems", []);
+                }}
+              >
+                <View />
+              </div>
             </>
           )}
         />
diff --git a/applications/uk.ewsgit.files/web/layout/Layout.module.scss b/applications/uk.ewsgit.files/web/layout/Layout.module.scss
--- a/applications/uk.ewsgit.files/web/layout/Layout.module.scss
+++ b/applications/uk.ewsgit.files/web/layout/Layout.module.scss
@@ -4,6 +4,13 @@ grid-template-columns: 1fr auto;
   grid-template-rows: auto 1fr auto;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+}
+
+.viewRoot {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
 }
 
 .sidebar {
diff --git a/applications/uk.ewsgit.files/web/layout/Layout.tsx b/applications/uk.ewsgit.files/web/layout/Layout.tsx
--- a/applications/uk.ewsgit.files/web/layout/Layout.tsx
+++ b/applications/uk.ewsgit.files/web/layout/Layout.tsx
@@ -7,7 +7,6 @@ import { useNavigate } from "@solidjs/router";
 import browserPath from "path-browserify";
 import { type Component, type ParentProps, useContext } from "solid-js";
 import { AppContext } from "../appContext.ts";
-import ActionBar from "./components/ActionBar/ActionBar";
 import PreviewPane from "./components/PreviewPane/PreviewPane.tsx";
 import Quota from "./components/Quota/Quota.tsx";
 import StatusBar from "./components/StatusBar/StatusBar.tsx";
diff --git a/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.module.scss b/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.module.scss
--- a/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.module.scss
+++ b/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.module.scss
@@ -24,6 +24,17 @@ top: 0;
   display: flex;
 }
 
+.pathSuggestions {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+}
+
 .pathInput {
   position: absolute;
   left: 0;
diff --git a/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.tsx b/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.tsx
--- a/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.tsx
+++ b/applications/uk.ewsgit.files/web/layout/components/ActionBar/ActionBar.tsx
@@ -4,20 +4,26 @@ import ART_TRACK_ICON from "@material-symbols/svg-700/outlined/art_track.svg";
 import CHEVRON_LEFT_ICON from "@material-symbols/svg-700/outlined/chevron_left.svg";
 import CHEVRON_RIGHT_ICON from "@material-symbols/svg-700/outlined/chevron_right.svg";
 import LISTS_ICON from "@material-symbols/svg-700/outlined/lists.svg";
+import RIGHT_PANEL_CLOSE_ICON from "@material-symbols/svg-700/outlined/right_panel_close.svg";
+import RIGHT_PANEL_OPEN_ICON from "@material-symbols/svg-700/outlined/right_panel_open.svg";
 import UPLOAD_ICON from "@material-symbols/svg-700/outlined/upload.svg";
 import VIEW_MODULE_ICON from "@material-symbols/svg-700/outlined/view_module.svg";
+import UKCard from "@onlineworkspace/uikit-solid/src/components/card/UKCard.tsx";
 import UKIconButton from "@onlineworkspace/uikit-solid/src/components/iconButton/UKIconButton.tsx";
+import UKText from "@onlineworkspace/uikit-solid/src/components/text/UKText.jsx";
+import useIsMobile from "@onlineworkspace/uikit-solid/src/core/useIsMobile.ts";
 import { useSearchParams } from "@solidjs/router";
 import browserPath from "path-browserify";
-import { type Component, Show, useContext } from "solid-js";
+import { type Component, createSignal, Show, useContext } from "solid-js";
 import { AppContext } from "../../../appContext.ts";
 import type { ViewItem } from "../../../pages/dir/viewItem.ts";
 import styles from "./ActionBar.module.scss";
-import UKText from "@onlineworkspace/uikit-solid/src/components/text/UKText.jsx";
 
 const ActionBar: Component = () => {
+  const isMobile = useIsMobile();
   const appContext = useContext(AppContext);
   const [searchParams, setSearchParams] = useSearchParams<{ path: string }>();
+  const [pathQuery, setPathQuery] = createSignal<string | undefined>(undefined);
 
   return (
     <div class={styles.root}>
@@ -37,15 +43,39 @@ <Show when={searchParams.path !== undefined}>
         <div class={styles.pathSelector}>
           <div class={styles.pathSegments}>
             {/* Path Segments */}
-            {(searchParams.path || "").split(browserPath.sep).map((segment) => {
+            {(searchParams.path || "").split(browserPath.sep).map((segment, index) => {
               return (
                 <UKText role="label" size="m">
                   {segment}
+                  {(searchParams.path || "").split(browserPath.sep).length - 1 === index ? "" : "/"}
                 </UKText>
               );
             })}
           </div>
-          <input class={styles.pathInput} type={"text"} value={searchParams.path} onChange={(e) => setSearchParams({ path: e.currentTarget.value })} />
+          <input
+            class={styles.pathInput}
+            type={"text"}
+            value={searchParams.path}
+            onKeyDown={(e) => {
+              setPathQuery(e.currentTarget.value);
+            }}
+            onChange={(e) => setSearchParams({ path: e.currentTarget.value })}
+          />
+          <UKCard class={styles.pathSuggestions}>
+            {pathQuery()}
+            <UKText role={"body"} size={"m"}>
+              /Suggestion/1
+            </UKText>
+            <UKText role={"body"} size={"m"}>
+              /Suggestion/2
+            </UKText>
+            <UKText role={"body"} size={"m"}>
+              /Suggestion/3
+            </UKText>
+            <UKText role={"body"} size={"m"}>
+              /Suggestion/4
+            </UKText>
+          </UKCard>
         </div>
       </Show>
       <div class={styles.actionButtons}>
@@ -63,13 +93,15 @@ color={appContext?.userPreferences.viewType === "grid" ? "tonal" : "standard"}
           alt={"Grid View"}
           onClick={() => appContext?.setUserPreferences("viewType", "grid")}
         />
-        <UKIconButton
-          icon={ART_TRACK_ICON}
-          disabled={appContext?.userPreferences.viewType === "gallery"}
-          color={appContext?.userPreferences.viewType === "gallery" ? "tonal" : "standard"}
-          alt={"Gallery View"}
-          onClick={() => appContext?.setUserPreferences("viewType", "gallery")}
-        />
+        {!isMobile() && (
+          <UKIconButton
+            icon={ART_TRACK_ICON}
+            disabled={appContext?.userPreferences.viewType === "gallery"}
+            color={appContext?.userPreferences.viewType === "gallery" ? "tonal" : "standard"}
+            alt={"Gallery View"}
+            onClick={() => appContext?.setUserPreferences("viewType", "gallery")}
+          />
+        )}
         <UKIconButton
           icon={UPLOAD_ICON}
           color={"filled"}
@@ -89,6 +121,16 @@ { type: "file", path: `/randomNewItem${Math.round(Math.random() * 10000)}` },
             ] as ViewItem[]);
           }}
         />
+        {!isMobile() && (
+          <UKIconButton
+            icon={appContext?.userPreferences.showPreview ? RIGHT_PANEL_OPEN_ICON : RIGHT_PANEL_CLOSE_ICON}
+            color={"filled"}
+            alt={"Create File"}
+            onClick={() => {
+              appContext?.setUserPreferences("showPreview", !appContext?.userPreferences.showPreview);
+            }}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/applications/uk.ewsgit.files/web/layout/components/PreviewPane/PreviewPane.module.scss b/applications/uk.ewsgit.files/web/layout/components/PreviewPane/PreviewPane.module.scss
--- a/applications/uk.ewsgit.files/web/layout/components/PreviewPane/PreviewPane.module.scss
+++ b/applications/uk.ewsgit.files/web/layout/components/PreviewPane/PreviewPane.module.scss
@@ -1,6 +1,30 @@
 .root {
   height: 100%;
+  min-width: 16rem;
+  max-width: 32rem;
   padding: 1rem;
   background-color: rgb(var(--uk-sys-color-surface-container-low));
   border-left: 1px solid rgb(var(--uk-sys-color-outline-variant));
+  display: flex;
+  flex-direction: column;
+  margin-right: 0;
+  transition: min-width var(--uk-sys-motion-duration-500) var(--uk-sys-motion-easing-standard-decelerate), margin-right var(--uk-sys-motion-duration-200) var(--uk-sys-motion-easing-standard-decelerate);
+
+  &[data-hide="true"] {
+    width: 0;
+    min-width: 0;
+    margin-right: calc(-2rem - 1px);
+  }
+}
+
+.previewIcon {
+  --icon-size: 8rem;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.previewItemName {
+  margin-bottom: 1rem;
 }
diff --git a/applications/uk.ewsgit.files/web/layout/components/PreviewPane/PreviewPane.tsx b/applications/uk.ewsgit.files/web/layout/components/PreviewPane/PreviewPane.tsx
--- a/applications/uk.ewsgit.files/web/layout/components/PreviewPane/PreviewPane.tsx
+++ b/applications/uk.ewsgit.files/web/layout/components/PreviewPane/PreviewPane.tsx
@@ -1,35 +1,54 @@
 import UKDivider from "@onlineworkspace/uikit-solid/src/components/divider/UKDivider.tsx";
+import UKIcon from "@onlineworkspace/uikit-solid/src/components/icon/UKIcon.tsx";
 import UKText from "@onlineworkspace/uikit-solid/src/components/text/UKText.tsx";
+import useIsMobile from "@onlineworkspace/uikit-solid/src/core/useIsMobile.ts";
+import browserPath from "path-browserify";
 import { type Component, useContext } from "solid-js";
 import { AppContext } from "../../../appContext.ts";
+import iconForItemType from "../../../pages/dir/iconForItemType.ts";
 import styles from "./PreviewPane.module.scss";
-import browserPath from "path-browserify";
 
 const PreviewPane: Component = () => {
+  const isMobile = useIsMobile();
   const appContext = useContext(AppContext);
 
   return (
-    <div class={styles.root}>
+    <div class={styles.root} data-hide={!appContext?.userPreferences.showPreview || isMobile()}>
       <UKText role={"title"} size={"m"}>
         Preview
       </UKText>
       <UKDivider direction={"horizontal"} />
-      {(appContext?.viewState.selectedItems.length || 0) > 0 ? (
-        appContext!.viewState.selectedItems.length > 1 ? (
-          <>
-            <div></div>
-            <UKText role="body" size="l">
-              {appContext!.viewState.selectedItems.length} items
-            </UKText>
-          </>
-        ) : (
-          <>
-            <div></div>
-            <UKText role="body" size="l">
-              {browserPath.basename(appContext!.viewState.selectedItems[0])}
-            </UKText>
-          </>
-        )
+      {!isMobile() && appContext?.userPreferences.showPreview && (appContext?.viewState.selectedItems.length || 0) > 0 ? (
+        <>
+          {appContext!.viewState.selectedItems.length > 1 ? (
+            <>
+              <UKIcon class={styles.previewIcon}>{iconForItemType("unknown")}</UKIcon>
+              <UKText class={styles.previewItemName} role="body" size="l" align={"center"}>
+                {appContext!.viewState.selectedItems.length} items
+              </UKText>
+            </>
+          ) : (
+            <>
+              <UKIcon class={styles.previewIcon}>
+                {iconForItemType(
+                  appContext?.viewState.viewItems.find((item) => {
+                    return item.path === appContext!.viewState.selectedItems[0];
+                  })?.type || "file",
+                )}
+              </UKIcon>
+              <UKText class={styles.previewItemName} role="body" size="l" align={"center"}>
+                {browserPath.basename(appContext!.viewState.selectedItems[0])}
+              </UKText>
+            </>
+          )}
+          <UKText role={"title"} size={"m"}>
+            Details
+          </UKText>
+          <UKDivider direction={"horizontal"} />
+          <UKText role={"body"} size={"m"}>
+            Dimensions: ...x...
+          </UKText>
+        </>
       ) : null}
     </div>
   );
diff --git a/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.module.scss b/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.module.scss
--- a/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.module.scss
+++ b/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.module.scss
@@ -23,6 +23,11 @@ gap: 0.5rem;
   align-items: center;
   justify-content: start;
   border: none;
+  border-radius: 0.5rem;
+
+  &[data-is-odd="true"] {
+    background: rgb(var(--uk-sys-color-surface-container));
+  }
 
   &[data-selected="true"] {
     background: red;
diff --git a/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.tsx b/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.tsx
--- a/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.tsx
+++ b/applications/uk.ewsgit.files/web/pages/dir/components/DetailsView/DetailsView.tsx
@@ -34,6 +34,7 @@ type={"button"}
               class={styles.item}
               onClick={(e) => onItemClick(e, appContext!, index(), item)}
               data-selected={appContext?.viewState.selectedItems.includes(item.path)}
+              data-is-odd={index() % 2 === 1}
             >
               {item.thumbnail !== undefined ? <>thumbnail time</> : <UKIcon>{iconForItemType(item.type)}</UKIcon>}
               {browserPath.basename(item.path)}
diff --git a/applications/uk.ewsgit.files/web/pages/dir/iconForItemType.ts b/applications/uk.ewsgit.files/web/pages/dir/iconForItemType.ts
--- a/applications/uk.ewsgit.files/web/pages/dir/iconForItemType.ts
+++ b/applications/uk.ewsgit.files/web/pages/dir/iconForItemType.ts
@@ -4,7 +4,7 @@ import FOLDER_ICON from "@material-symbols/svg-700/outlined/folder.svg";
 import UNKNOWN_ICON from "@material-symbols/svg-700/outlined/unknown_document.svg";
 import type { ViewItem } from "./viewItem.ts";
 
-export default function iconForItemType(type: ViewItem["type"]) {
+export default function iconForItemType(type: ViewItem["type"] | "unknown") {
   switch (type) {
     case "directory":
       return FOLDER_ICON;
diff --git a/applications/uk.ewsgit.photos/web/pages/gallery/Index.tsx b/applications/uk.ewsgit.photos/web/pages/gallery/Index.tsx
--- a/applications/uk.ewsgit.photos/web/pages/gallery/Index.tsx
+++ b/applications/uk.ewsgit.photos/web/pages/gallery/Index.tsx
@@ -17,14 +17,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -33,14 +25,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -49,14 +33,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -65,14 +41,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -81,14 +49,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -97,14 +57,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -113,14 +65,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -129,14 +73,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -145,14 +81,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -161,27 +89,11 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -193,14 +105,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -209,14 +113,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -225,14 +121,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -241,14 +129,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -257,14 +137,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -273,14 +145,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -289,14 +153,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -305,14 +161,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -321,14 +169,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -337,27 +177,11 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -369,14 +193,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -385,14 +201,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -401,14 +209,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -417,14 +217,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -433,14 +225,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -449,14 +233,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -465,14 +241,6 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
             src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
@@ -481,11 +249,7 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -497,11 +261,11 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -513,11 +277,11 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -529,11 +293,15 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
+            size: { width: 100, height: 100 },
+          },
+          {
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -545,11 +313,7 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -561,11 +325,7 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -577,11 +337,15 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
+            size: { width: 100, height: 100 },
+          },
+          {
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -593,11 +357,11 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -609,11 +373,7 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -625,11 +385,11 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -641,11 +401,11 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -657,11 +417,15 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
+            size: { width: 100, height: 100 },
+          },
+          {
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -673,11 +437,7 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -689,11 +449,11 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -705,11 +465,7 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -721,11 +477,19 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
+            size: { width: 100, height: 100 },
+          },
+          {
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
+            size: { width: 100, height: 100 },
+          },
+          {
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -737,11 +501,7 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
-            size: { width: 100, height: 100 },
-          },
-          {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -753,11 +513,11 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
@@ -769,11 +529,11 @@ src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
           {
-            src: "https://images.pexels.com/photos/1133742/pexels-photo-1133742.jpeg",
+            src: "https://images.pexels.com/photos/927022/pexels-photo-927022.jpeg",
             size: { width: 100, height: 100 },
           },
         ]}
diff --git a/uikit-solid/src/components/sideBar/UKSideBar.module.scss b/uikit-solid/src/components/sideBar/UKSideBar.module.scss
--- a/uikit-solid/src/components/sideBar/UKSideBar.module.scss
+++ b/uikit-solid/src/components/sideBar/UKSideBar.module.scss
@@ -12,6 +12,8 @@
     .component {
       height: max-content;
       max-width: 100%;
+      border-left: none;
+      border-right: none;
     }
   }
 }

--
tangled.sh