dashboard wip

dinkelspiel · May 23, 2024 · 21cc7fc · 21cc7fc
1 parent 2fc7f5b
commit 21cc7fc
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 18 deletions.
diff --git a/app/(app)/dashboard/client.tsx b/app/(app)/dashboard/client.tsx
@@ -39,6 +39,7 @@ import { useEffect, useState } from 'react';
 import { FilterStyle, useDashboardStore } from './state';
 import useSwr from 'swr';
 import fetcher from '@/client/fetcher';
+import ModifyUserEntry from '@/components/modifyUserEntry';
 
 const Dashboard = ({
   userEntries: originalUserEntries,
@@ -101,7 +102,7 @@ const Dashboard = ({
 
   return (
     <>
-      <Header>
+      <Header className="col-span-2">
         <HeaderHeader>
           <HeaderTitle>My Media</HeaderTitle>
           <HeaderDescription>
@@ -189,8 +190,8 @@ const Dashboard = ({
           </Popover>
         </HeaderContent>
       </Header>
-      <div className="grid justify-center">
-        <div className="grid w-fit grid-cols-3 gap-4 min-[700px]:grid-cols-4 min-[1100px]:grid-cols-5 min-[1300px]:grid-cols-6 min-[1500px]:grid-cols-7 min-[1600px]:grid-cols-8 min-[1700px]:grid-cols-9 min-[1800px]:grid-cols-10 min-[1900px]:grid-cols-11">
+      <div className="grid justify-center p-4">
+        <div className="grid w-fit grid-cols-3 gap-4 min-[700px]:grid-cols-4 min-[1100px]:grid-cols-5 min-[1300px]:grid-cols-6 min-[1500px]:grid-cols-7 min-[1600px]:grid-cols-8 min-[1700px]:grid-cols-8">
           {userEntries
             .sort((a, b) => {
               switch (filterStyle) {
@@ -267,6 +268,18 @@ const Dashboard = ({
             })}
         </div>
       </div>
+      <div className="sticky top-[80px] h-[calc(100dvh-81px)] bg-[#F5F5F5] p-4 shadow-[inset_0_0px_8px_0_rgb(0_0_0_/_0.02)] shadow-gray-300">
+        {userEntries[0] && (
+          <ModifyUserEntry
+            userEntry={userEntries[0]!}
+            setOpen={() => []}
+            setUserEntry={setUserEntry}
+            userLists={[]}
+            userListsWithEntry={[]}
+            refetchUserLists={async () => {}}
+          />
+        )}
+      </div>
     </>
   );
 };

diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
@@ -47,7 +47,7 @@ const Layout = async ({ children }: { children: ReactNode }) => {
           </SidebarFooter>
         </Sidebar>
 
-        <main className="flex flex-col gap-4 px-5 py-4">{children}</main>
+        <main className="grid grid-cols-[1fr,600px]">{children}</main>
         <Toaster />
       </SidebarLayout>
     );

diff --git a/components/header.tsx b/components/header.tsx
@@ -7,7 +7,13 @@ export const Header = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => {
   return (
-    <div className={cn('flex flex-row', className)} {...props}>
+    <div
+      className={cn(
+        'sticky top-0 z-10 flex flex-row border-b border-b-gray-200 bg-white px-4 py-3',
+        className
+      )}
+      {...props}
+    >
       {children}
     </div>
   );

diff --git a/components/modifyUserEntry.tsx b/components/modifyUserEntry.tsx
@@ -237,16 +237,10 @@ const ModifyUserEntry = ({
           />
         </div>
         <div className="flex items-center justify-between">
+          <Button variant={'ghost'} className="[&>svg]:size-4">
+            <Trash2 className="stroke-red-500" />
+          </Button>
           <div className="flex gap-4">
-            <form action={formAction}>
-              <input type="hidden" value={userEntry.id} name="userEntryId" />
-              <input type="hidden" value={rating} name="rating" />
-              <input type="hidden" value={notes} name="notes" />
-              <SubmitButton className="w-max px-6" size={'default'}>
-                <Save className="size-3" />
-                Save
-              </SubmitButton>
-            </form>
             <Popover open={addListsOpen} onOpenChange={setAddListsOpen}>
               <PopoverTrigger asChild>
                 <Button
@@ -310,10 +304,16 @@ const ModifyUserEntry = ({
                 </Command>
               </PopoverContent>
             </Popover>
+            <form action={formAction}>
+              <input type="hidden" value={userEntry.id} name="userEntryId" />
+              <input type="hidden" value={rating} name="rating" />
+              <input type="hidden" value={notes} name="notes" />
+              <SubmitButton className="w-max px-6" size={'default'}>
+                <Save className="size-3" />
+                Save
+              </SubmitButton>
+            </form>
           </div>
-          <Button variant={'ghost'} className="[&>svg]:size-4">
-            <Trash2 className="stroke-red-500" />
-          </Button>
         </div>
       </div>
     );

diff --git a/components/sidebar.tsx b/components/sidebar.tsx
@@ -30,7 +30,7 @@ export const Sidebar = ({
       {...props}
       aria-label="Sidebar"
     >
-      <div className="flex h-[75px] flex-col justify-center overflow-y-auto border-b border-slate-200 bg-neutral-100 px-3 py-4 shadow-[inset_0_0px_8px_0_rgb(0_0_0_/_0.02)] dark:border-slate-700 dark:bg-slate-900 lg:h-full lg:justify-start lg:border-b-0">
+      <div className="flex h-[75px] flex-col justify-center overflow-y-auto border-b border-e border-gray-300 bg-neutral-100 px-3 py-4 shadow-md shadow-gray-300 dark:border-slate-700 dark:bg-slate-900 lg:h-full lg:justify-start lg:border-b-0">
         <SidebarHeader {...headerProps}>
           {header}
           <button className="flex justify-end px-2 lg:hidden">