dashboard

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 }