dashboard

package-lock.json

@@ -8,6 +8,7 @@
       "name": "klayrion",
       "version": "0.0.1-alpha.0",
       "dependencies": {
+        "@radix-ui/react-checkbox": "^1.1.4",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-label": "^2.1.2",
         "@radix-ui/react-separator": "^1.1.2",
@@ -755,6 +756,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.4.tgz",
+      "integrity": "sha512-wP0CPAHq+P5I4INKe3hJrIa1WoNqqrejzW+zoU0rOvo1b9gDEJJFl2rYfO1PYJUQCc2H1WZxIJmyv9BS8i5fLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.2.tgz",
@@ -1275,6 +1306,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "test": "node test.mjs"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.2",

src/app/dashboard/page.tsx

@@ -1,5 +1,9 @@
 import Engagement from '@/components/engagement';
+import Ideas from '@/components/ideas';
+import RecentPosts from '@/components/recentPosts';
 import { Calendar } from '@/components/ui/calendar';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
 
 import {
     SidebarProvider,
@@ -19,7 +23,7 @@ export default function Dashboard() {
                 </SidebarProvider>
             </div>
 
-            <div className="flex flex-1 flex-col p-6 px-10 h-max">
+            <div className="flex flex-1 flex-col p-6 px-5 md:px-10 h-max">
                 <div className="w-full">
                     <h1 className="text-3xl font-bold">Dashboard</h1>
                 </div>
@@ -40,6 +44,55 @@ export default function Dashboard() {
                         />
                     </div>
                 </div>
+
+                <div className="w-full mt-5 flex gap-5">
+                    <div className="flex flex-col w-max gap-5">
+                        <Ideas
+                            ideas={[
+                                {
+                                    idea: 'The recent Linus tech tips drama',
+                                    checked: true,
+                                },
+                                { idea: 'Code reviews', checked: false },
+                                {
+                                    idea: 'How to build charts in react',
+                                    checked: false,
+                                },
+                            ]}
+                        />
+                        <Ideas
+                            ideas={[
+                                {
+                                    idea: 'The recent Linus tech tips drama',
+                                    checked: true,
+                                },
+                                { idea: 'Code reviews', checked: false },
+                                {
+                                    idea: 'How to build charts in react',
+                                    checked: false,
+                                },
+                            ]}
+                        />
+                    </div>
+                    <RecentPosts
+                        posts={[
+                            {
+                                platform: 'x',
+                                name: 'Leo Codes',
+                                username: 'leo.codes',
+                                content:
+                                    "The linus tech tips drama is complex, don't know who to blame, they should try to figure this out privately",
+                            },
+                            {
+                                platform: 'x',
+                                name: 'Leo Codes',
+                                username: 'leo.codes',
+                                content:
+                                    "Hello, world",
+                            },
+                        ]}
+                    />
+                </div>
             </div>
         </div>
     );

src/app/globals.css

@@ -9,24 +9,24 @@ body {
 @layer base {
     :root {
         --background: 0 0% 100%;
-        --foreground: 0 0% 3.9%;
+        --foreground: 240 10% 3.9%;
         --card: 0 0% 100%;
-        --card-foreground: 0 0% 3.9%;
+        --card-foreground: 240 10% 3.9%;
         --popover: 0 0% 100%;
-        --popover-foreground: 0 0% 3.9%;
+        --popover-foreground: 240 10% 3.9%;
-        --primary: 0 72.2% 50.6%;
+        --primary: 240 5.9% 10%;
-        --primary-foreground: 0 85.7% 97.3%;
+        --primary-foreground: 0 0% 98%;
-        --secondary: 0 0% 96.1%;
+        --secondary: 240 4.8% 95.9%;
-        --secondary-foreground: 0 0% 9%;
+        --secondary-foreground: 240 5.9% 10%;
-        --muted: 0 0% 96.1%;
+        --muted: 240 4.8% 95.9%;
-        --muted-foreground: 0 0% 45.1%;
+        --muted-foreground: 240 3.8% 46.1%;
-        --accent: 0 0% 96.1%;
+        --accent: 240 4.8% 95.9%;
-        --accent-foreground: 0 0% 9%;
+        --accent-foreground: 240 5.9% 10%;
         --destructive: 0 84.2% 60.2%;
         --destructive-foreground: 0 0% 98%;
-        --border: 0 0% 89.8%;
+        --border: 240 5.9% 90%;
-        --input: 0 0% 89.8%;
+        --input: 240 5.9% 90%;
-        --ring: 0 72.2% 50.6%;
+        --ring: 240 5.9% 10%;
         --radius: 0.5rem;
         --chart-1: 12 76% 61%;
         --chart-2: 173 58% 39%;
@@ -36,25 +36,25 @@ body {
     }
 
     .dark {
-        --background: 0 0% 3.9%;
+        --background: 240 10% 3.9%;
         --foreground: 0 0% 98%;
-        --card: 0 0% 3.9%;
+        --card: 240 10% 3.9%;
         --card-foreground: 0 0% 98%;
-        --popover: 0 0% 3.9%;
+        --popover: 240 10% 3.9%;
         --popover-foreground: 0 0% 98%;
-        --primary: 0 72.2% 50.6%;
+        --primary: 0 0% 98%;
-        --primary-foreground: 0 85.7% 97.3%;
+        --primary-foreground: 240 5.9% 10%;
-        --secondary: 0 0% 14.9%;
+        --secondary: 240 3.7% 15.9%;
         --secondary-foreground: 0 0% 98%;
-        --muted: 0 0% 14.9%;
+        --muted: 240 3.7% 15.9%;
-        --muted-foreground: 0 0% 63.9%;
+        --muted-foreground: 240 5% 64.9%;
-        --accent: 0 0% 14.9%;
+        --accent: 240 3.7% 15.9%;
         --accent-foreground: 0 0% 98%;
         --destructive: 0 62.8% 30.6%;
         --destructive-foreground: 0 0% 98%;
-        --border: 0 0% 14.9%;
+        --border: 240 3.7% 15.9%;
-        --input: 0 0% 14.9%;
+        --input: 240 3.7% 15.9%;
-        --ring: 0 72.2% 50.6%;
+        --ring: 240 4.9% 83.9%;
         --chart-1: 220 70% 50%;
         --chart-2: 160 60% 45%;
         --chart-3: 30 80% 55%;

src/components/ideas.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { Checkbox } from './ui/checkbox';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+
+export default function Ideas({
+    ideas,
+}: {
+    ideas: { idea: string; checked: boolean }[];
+}) {
+    return (
+        <Card className="pb-4">
+            <CardHeader>
+                <CardTitle>Daily content Ideas</CardTitle>
+            </CardHeader>
+
+            <CardContent className="w-[400px] h-[100px] flex gap-5 flex-col">
+                {ideas.map(({ idea, checked }, i) => (
+                    <div className="flex space-x-2" key={i}>
+                        <Checkbox
+                            id="terms"
+                            onClick={(e) => e.preventDefault()}
+                            checked={checked}
+                        />
+                        <label
+                            htmlFor="terms"
+                            className="text-lg font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                        >
+                            {idea}
+                        </label>
+                    </div>
+                ))}
+            </CardContent>
+        </Card>
+    );
+}

src/components/recentPosts.tsx

@@ -0,0 +1,44 @@
+import { PlatformKind } from '@/utils';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+
+export default function RecentPosts({
+    posts,
+}: {
+    posts: {
+        platform: PlatformKind;
+        name: string;
+        username: string;
+        content: string;
+    }[];
+}) {
+    return (
+        <Card className="flex flex-col flex-grow">
+            <CardHeader>
+                <CardTitle>Recent posts</CardTitle>
+            </CardHeader>
+
+            <CardContent className="w-full flex flex-col gap-5">
+                {posts.map((post, i) => (
+                    <div
+                        key={i}
+                        className="flex-1 flex flex-col w-full border p-3 rounded-xl"
+                    >
+                        <div className="relative">
+                            <div className="flex items-center w-full">
+                                <img
+                                    src="/pfp"
+                                    alt="PFP"
+                                    className="size-12 rounded-full"
+                                />
+                                <p className="ml-4">{post.name}</p>
+                            </div>
+                        </div>
+                        <div className="w-full mt-2">
+                            <p>{post.content}</p>
+                        </div>
+                    </div>
+                ))}
+            </CardContent>
+        </Card>
+    );
+}

src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/utils.ts

@@ -7,8 +7,10 @@ export function generateUrlSafeString(length = 16) {
     return Array.from(array, (byte) => chars[byte % chars.length]).join('');
 }
 
+export type PlatformKind = 'x';
+
 export interface Platform {
-    platform: 'x';
+    platform: PlatformKind;
     token: string;
     secret: string;
 }