Add Photos UI

islands/notes/Note.tsx

@@ -84,7 +84,7 @@ export default function Note({ fileName, currentPath, contents }: NoteProps) {
       </textarea>
 
       <span
-        class={`flex justify-end items-center text-sm mt-1 mx-2 ${
+        class={`flex justify-end items-center text-sm mt-1 mx-auto max-w-7xl ${
           hasSaved.value ? 'text-green-600' : 'text-slate-100'
         }`}
       >

islands/photos/PhotosWrapper.tsx

@@ -0,0 +1,21 @@
+import { Directory, DirectoryFile } from '/lib/types.ts';
+import MainPhotos from '/components/photos/MainPhotos.tsx';
+
+interface PhotosWrapperProps {
+  initialDirectories: Directory[];
+  initialFiles: DirectoryFile[];
+  initialPath: string;
+}
+
+// This wrapper is necessary because islands need to be the first frontend component, but they don't support functions as props, so the more complex logic needs to live in the component itself
+export default function PhotosWrapper(
+  { initialDirectories, initialFiles, initialPath }: PhotosWrapperProps,
+) {
+  return (
+    <MainPhotos
+      initialDirectories={initialDirectories}
+      initialFiles={initialFiles}
+      initialPath={initialPath}
+    />
+  );
+}