diff --git a/package-lock.json b/package-lock.json index 4b0f24f..0634924 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index dfbd038..2761696 100644 --- a/package.json +++ b/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", diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 87e18a9..c31e65f 100644 --- a/src/app/dashboard/page.tsx +++ b/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() { -
+

Dashboard

@@ -40,6 +44,55 @@ export default function Dashboard() { />
+ +
+
+ + +
+ +
); diff --git a/src/app/globals.css b/src/app/globals.css index 77c9fc5..9bf6d67 100644 --- a/src/app/globals.css +++ b/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%; - --primary: 0 72.2% 50.6%; - --primary-foreground: 0 85.7% 97.3%; - --secondary: 0 0% 96.1%; - --secondary-foreground: 0 0% 9%; - --muted: 0 0% 96.1%; - --muted-foreground: 0 0% 45.1%; - --accent: 0 0% 96.1%; - --accent-foreground: 0 0% 9%; + --popover-foreground: 240 10% 3.9%; + --primary: 240 5.9% 10%; + --primary-foreground: 0 0% 98%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --muted: 240 4.8% 95.9%; + --muted-foreground: 240 3.8% 46.1%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; - --border: 0 0% 89.8%; - --input: 0 0% 89.8%; - --ring: 0 72.2% 50.6%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --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-foreground: 0 85.7% 97.3%; - --secondary: 0 0% 14.9%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; + --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; - --muted: 0 0% 14.9%; - --muted-foreground: 0 0% 63.9%; - --accent: 0 0% 14.9%; + --muted: 240 3.7% 15.9%; + --muted-foreground: 240 5% 64.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%; - --input: 0 0% 14.9%; - --ring: 0 72.2% 50.6%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; diff --git a/src/components/ideas.tsx b/src/components/ideas.tsx new file mode 100644 index 0000000..4a2382e --- /dev/null +++ b/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 ( + + + Daily content Ideas + + + + {ideas.map(({ idea, checked }, i) => ( +
+ e.preventDefault()} + checked={checked} + /> + +
+ ))} + + + ); +} diff --git a/src/components/recentPosts.tsx b/src/components/recentPosts.tsx new file mode 100644 index 0000000..e33a60e --- /dev/null +++ b/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 ( + + + Recent posts + + + + {posts.map((post, i) => ( +
+
+
+ PFP +

{post.name}

+
+
+
+

{post.content}

+
+
+ ))} + + + ); +} diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx new file mode 100644 index 0000000..c6fdd07 --- /dev/null +++ b/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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox } diff --git a/src/utils.ts b/src/utils.ts index 9abf8c1..0a9eada 100644 --- a/src/utils.ts +++ b/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; }