structuring
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
'use client';
|
||||
|
||||
import { PlatformKind } from '@/utils';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { PlatformIcon } from '@/components/icons';
|
||||
|
||||
export default function AccountStatus({
|
||||
accounts,
|
||||
}: {
|
||||
accounts: { platform: PlatformKind; name: string; ok: boolean }[];
|
||||
}) {
|
||||
return (
|
||||
<Card className="pb-4">
|
||||
<CardHeader>
|
||||
<CardTitle>Account status</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="w-full h-[100px] grid gap-2 grid-cols-3">
|
||||
{accounts.map((account, i) => (
|
||||
<div key={i} className="flex">
|
||||
{
|
||||
<PlatformIcon
|
||||
platform={account.platform}
|
||||
width={20}
|
||||
height={20}
|
||||
className="ml-1"
|
||||
/>
|
||||
}
|
||||
|
||||
{account.ok ? (
|
||||
<p className="ml-1">{account.name}</p>
|
||||
) : (
|
||||
<p className="text-[#D21F1F] ml-1">
|
||||
{account.name}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/*RG version*/}
|
||||
{/* {account.ok ? (
|
||||
<p className="text-[#32B25C] ml-1">{account.name}</p>
|
||||
) : (
|
||||
<p className="text-[#D21F1F] ml-1">
|
||||
{account.name}
|
||||
</p>
|
||||
)} */}
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
'use client';
|
||||
|
||||
import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts';
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import {
|
||||
ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from '@/components/ui/chart';
|
||||
|
||||
const chartConfig = {
|
||||
views: {
|
||||
label: 'Views',
|
||||
color: 'hsl(var(--foreground))',
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
export default function Engagement({
|
||||
chartData,
|
||||
}: {
|
||||
chartData: {
|
||||
week: string;
|
||||
views: number;
|
||||
}[];
|
||||
}) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Post engagement</CardTitle>
|
||||
<CardDescription>
|
||||
Showing engagements for the last week
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="w-full xl:w-[680px] lg:h-[270px] 2xl:w-[880px]"
|
||||
>
|
||||
<AreaChart
|
||||
accessibilityLayer
|
||||
data={chartData}
|
||||
margin={{
|
||||
left: 12,
|
||||
right: 12,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey="week"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
tickFormatter={(value) => value.slice(0, 3)}
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={<ChartTooltipContent indicator="line" />}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="fillViews"
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor="var(--color-views)"
|
||||
stopOpacity={0.8}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor="var(--color-views)"
|
||||
stopOpacity={0.1}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<Area
|
||||
dataKey="views"
|
||||
type="natural"
|
||||
fill="url(#fillViews)"
|
||||
fillOpacity={0.4}
|
||||
stroke="var(--color-views)"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
'use client';
|
||||
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/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-full 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>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import AccountStatus from '@/components/accountStatus';
|
||||
import Engagement from '@/components/engagement';
|
||||
import Ideas from '@/components/ideas';
|
||||
import RecentPosts from '@/components/recentPosts';
|
||||
import AccountStatus from './accountStatus';
|
||||
import Engagement from './engagement';
|
||||
import Ideas from './ideas';
|
||||
import RecentPosts from './recentPosts';
|
||||
import App from '@/components/app';
|
||||
import { Calendar } from '@/components/ui/calendar';
|
||||
import { cookies } from 'next/headers';
|
||||
@@ -12,7 +12,7 @@ async function getSession(sessionId: string) {
|
||||
try {
|
||||
return (
|
||||
await axios.get(`http:/localhost:3000/api/session/?id=${sessionId}`)
|
||||
).data;
|
||||
).data.dashboard;
|
||||
} catch {
|
||||
redirect('/login');
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
import { PlatformKind } from '@/utils';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { PlatformIcon } from '@/components/icons';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
export default function RecentPosts({
|
||||
posts,
|
||||
}: {
|
||||
posts: {
|
||||
platform: PlatformKind;
|
||||
profileUrl: string;
|
||||
name: string;
|
||||
date: Date;
|
||||
content: string;
|
||||
}[];
|
||||
}) {
|
||||
return (
|
||||
<Card className="flex flex-col flex-grow">
|
||||
<CardHeader>
|
||||
<CardTitle>Recent posts</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="w-full h-full grid grid-rows-2 gap-4 items-stretch">
|
||||
{posts.map((post, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="border flex flex-col h-full p-4 rounded-xl"
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="flex items-center w-full">
|
||||
<img
|
||||
src={post.profileUrl}
|
||||
alt="PFP"
|
||||
className="size-12 rounded-full"
|
||||
/>
|
||||
<p className="ml-4">{post.name}</p>
|
||||
<PlatformIcon
|
||||
platform={post.platform}
|
||||
width={20}
|
||||
height={20}
|
||||
className="ml-1"
|
||||
/>
|
||||
<p className="ml-1 text-muted-foreground">
|
||||
{format(post.date, 'MMM dd h:mm aa')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full mt-2 flex-1">
|
||||
<p className="line-clamp-2">{post.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user