Create page: Home

src/app/dashboard/page.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import React from 'react';
+import Sidebar from '@/components/Sidebar';
+import SidebarItem from '@/components/SidebarItem';
+import SidebarHeading from '@/components/SidebarHeading';
+import Content from '@/components/Content';
+import PageLink from '@/components/PageLink';
+import Avatar from '@/components/Avatar';
+
+function DashboardPage() {
+  return (
+    <div className="flex h-screen text-white">
+      <Sidebar>
+        <Avatar initials="GL" />
+        <div className="text-2xl font-bold mb-6">Gram Liu</div>
+        <SidebarHeading text="Navigation" />
+        <SidebarItem>Profile</SidebarItem>
+        <SidebarItem>Settings</SidebarItem>
+      </Sidebar>
+      <Content>
+        <h1 className="text-4xl font-bold mb-4">Welcome</h1>
+        <p className="text-lg mb-8">to your private space on the web</p>
+        <h2 className="text-3xl font-bold mb-4">Your pages</h2>
+        <PageLink icon="⚛️" label="Physics" colorClassName="text-blue-400" />
+        <PageLink icon="🧪" label="Chemistry" colorClassName="text-green-400" />
+        <PageLink icon="🧬" label="Biology" colorClassName="text-red-400" />
+      </Content>
+    </div>
+  );
+}
+
+export default DashboardPage;

src/components/Avatar.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import React from 'react';
+import { Avatar as BaseAvatar, AvatarFallback } from '@/components/ui/avatar';
+
+interface AvatarProps {
+  initials?: string;
+}
+
+function Avatar({ initials }: AvatarProps) {
+  return (
+    <BaseAvatar className="avatar w-16 h-16 mb-6">
+      <AvatarFallback>{initials}</AvatarFallback>
+    </BaseAvatar>
+  );
+}
+
+export default Avatar;

src/components/Content.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import React from 'react';
+
+interface ContentProps {
+  children: React.ReactNode;
+}
+
+function Content({ children }: ContentProps) {
+  return (
+    <div className="content w-3/4 p-6">
+      {children}
+    </div>
+  );
+}
+
+export default Content;

src/components/PageLink.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import React from 'react';
+
+interface PageLinkProps {
+  icon: string;
+  label: string;
+  colorClassName: string;
+}
+
+function PageLink({ icon, label, colorClassName }: PageLinkProps) {
+  return (
+    <div className={`page-link ${colorClassName} mb-2`}> 
+      <span>{icon}</span>
+      <span>{label}</span>
+    </div>
+  );
+}
+
+export default PageLink;

src/components/Sidebar.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import React from 'react';
+
+interface SidebarProps {
+  children: React.ReactNode;
+}
+
+function Sidebar({ children }: SidebarProps) {
+  return (
+    <div className="sidebar w-1/4 p-6">
+      {children}
+    </div>
+  );
+}
+
+export default Sidebar;

src/components/SidebarHeading.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import React from 'react';
+
+interface SidebarHeadingProps {
+  text: string;
+}
+
+function SidebarHeading({ text }: SidebarHeadingProps) {
+  return (
+    <div className="sidebar-heading uppercase text-xs mb-4">
+      {text}
+    </div>
+  );
+}
+
+export default SidebarHeading;

src/components/SidebarItem.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import React from 'react';
+
+interface SidebarItemProps {
+  children: React.ReactNode;
+}
+
+function SidebarItem({ children }: SidebarItemProps) {
+  return (
+    <div className="sidebar-item mb-2">
+      {children}
+    </div>
+  );
+}
+
+export default SidebarItem;