refactor: better shell layout for module page

noodle-run · Sep 5, 2024 · b83ad25 · b83ad25
1 parent 9e48c2f
commit b83ad25
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 36 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -83,11 +83,11 @@
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.33.0",
     "drizzle-zod": "^0.5.1",
-    "framer-motion": "^11.4.0",
+    "framer-motion": "^11.5.2",
     "geist": "^1.3.1",
     "jiti": "^1.21.6",
     "lucide-react": "^0.438.0",
-    "next": "14.2.7",
+    "next": "14.2.8",
     "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
@@ -105,7 +105,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.7",
+    "@changesets/cli": "^2.27.8",
     "@commitlint/cli": "^19.4.1",
     "@commitlint/config-conventional": "^19.4.1",
     "@commitlint/cz-commitlint": "^19.4.0",
@@ -115,15 +115,15 @@
     "@eslint/js": "^9.9.1",
     "@happy-dom/global-registrator": "^15.7.3",
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
-    "@next/eslint-plugin-next": "^14.2.7",
+    "@next/eslint-plugin-next": "^14.2.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.15",
     "@total-typescript/ts-reset": "^0.6.1",
     "@types/bun": "^1.1.8",
     "@types/eslint": "^9.6.1",
     "@types/eslint-config-prettier": "^6.11.3",
-    "@types/node": "^22.5.3",
+    "@types/node": "^22.5.4",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "commitizen": "^4.3.0",
@@ -132,7 +132,7 @@
     "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsdoc": "^50.2.2",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-react": "^7.35.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-regexp": "^2.6.0",
@@ -143,7 +143,7 @@
     "lint-staged": "^15.2.10",
     "markdownlint": "^0.35.0",
     "markdownlint-cli": "^0.41.0",
-    "postcss": "^8.4.44",
+    "postcss": "^8.4.45",
     "prettier": "^3.3.3",
     "prettier-plugin-curly": "^0.2.2",
     "prettier-plugin-packagejson": "^2.5.2",

diff --git a/src/app/(dashboard)/app/module/[id]/page.tsx b/src/app/(dashboard)/app/module/[id]/page.tsx
@@ -34,17 +34,38 @@ export default async function ModulePage({ params }: Props) {
   return (
     <div className="flex flex-1 gap-6">
       <div className="flex-1">
-        <div className="flex items-center gap-4">
-          <Icon
-            name={
-              userModule.icon === 'default'
-                ? 'Folder'
-                : (userModule.icon as IconNames)
-            }
-            size={30}
-            strokeWidth={1.5}
-          />
-          <h1 className="text-3xl font-medium">{userModule.name}</h1>
+        <div className="flex items-start gap-4">
+          <div className="mt-1">
+            <Icon
+              name={
+                userModule.icon === 'default'
+                  ? 'Folder'
+                  : (userModule.icon as IconNames)
+              }
+              size={28}
+              strokeWidth={1.5}
+            />
+          </div>
+          <div className="flex flex-1 flex-col gap-3">
+            <h1 className="text-3xl font-medium">{userModule.name}</h1>
+            <div className="flex items-start gap-6">
+              <p className="flex items-center gap-2 text-sm text-foreground-muted">
+                <RadicalIcon size={15} /> {userModule.code}
+              </p>
+              <p className="flex items-center gap-2 text-sm text-foreground-muted">
+                <WeightIcon size={15} /> {userModule.credits} credits
+              </p>
+              <p className="flex items-center gap-2 text-sm text-foreground-muted">
+                <ClockIcon size={15} /> Created {format(userModule.createdAt)}
+              </p>
+              <p className="flex items-center gap-2 text-sm text-foreground-muted">
+                <PenLineIcon size={15} /> 0 Notebooks
+              </p>
+              <p className="flex items-center gap-2 text-sm text-foreground-muted">
+                <DiamondIcon size={15} /> 0 Flashcards
+              </p>
+            </div>
+          </div>
         </div>
         <Tabs defaultValue="notes" className="mt-4 w-full">
           <TabsList className="w-full">
@@ -65,7 +86,7 @@ export default async function ModulePage({ params }: Props) {
           </TabsContent>
         </Tabs>
       </div>
-      <div className="w-[330px] rounded-lg border p-6">
+      <div className="min-w-[280px] rounded-lg border p-4">
         <div className="flex flex-col gap-3">
           <h2 className="font-medium">Description</h2>
           <Textarea
@@ -74,23 +95,6 @@ export default async function ModulePage({ params }: Props) {
             className="resize-none"
           />
         </div>
-        <div className="mt-4 flex flex-col gap-2 [&>p]:flex [&>p]:items-center [&>p]:gap-2 [&>p]:text-foreground-muted">
-          <p>
-            <RadicalIcon size={15} /> {userModule.code}
-          </p>
-          <p>
-            <WeightIcon size={15} /> {userModule.credits} credits
-          </p>
-          <p>
-            <ClockIcon size={15} /> {format(userModule.createdAt)}
-          </p>
-          <p>
-            <PenLineIcon size={15} /> 0 Notebooks
-          </p>
-          <p>
-            <DiamondIcon size={15} /> 0 Flashcards
-          </p>
-        </div>
       </div>
     </div>
   );