small changes

src/app/calendar/postDialog.tsx

@@ -34,6 +34,9 @@ import {
 } from '@/lib/types';
 import { CalendarSchedule, Event } from './calendar';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import RecentPosts from '../dashboard/recentPosts';
+import PlatformIcon from '@/components/icons';
+import { Input } from '@/components/ui/input';
 
 type PostDialogProps = {
     newPostDialogOpen: boolean;
@@ -55,6 +58,7 @@ export default function PostDialog({
 }: PostDialogProps) {
     const [content, setContent] = useState('');
     const [platforms, setPlatforms] = useState<UserPlatforms>({});
+    const [title, setTitle] = useState('');
 
     const [selectedPlatforms, setSelectedPlatforms] = useState<Set<string>>(
         new Set()
@@ -126,10 +130,9 @@ export default function PostDialog({
                 </div>
 
                 <div className="grid w-full gap-1.5">
-                    <Label htmlFor="message">Platforms</Label>
                     <ToggleGroup
                         type="multiple"
-                        className="flex flex-wrap gap-2"
+                        className="flex flex-wrap gap-2 mr-auto"
                     >
                         {Object.entries(platforms).map(([name, platform]) => (
                             <ToggleGroupItem
@@ -148,15 +151,30 @@ export default function PostDialog({
                                     });
                                 }}
                             >
-                                <img
-                                    src={platform.icon}
-                                    className="w-10 h-10 rounded-full"
-                                />
+                                <div className="relative w-10 h-10">
+                                    <img
+                                        src={platform.icon}
+                                        className="w-10 h-10 rounded-full"
+                                    />
+                                    <PlatformIcon
+                                        platform={platform.platform}
+                                        className="absolute bottom-0 right-0 bg-background"
+                                    />
+                                </div>
                             </ToggleGroupItem>
                         ))}
                     </ToggleGroup>
                 </div>
 
+                <div className="grid w-full gap-1.5">
+                    <Label htmlFor="title">Title</Label>
+                    <Input
+                        type="text"
+                        placeholder="Title"
+                        value={title}
+                        onChange={(e) => setTitle(e.target.value)}
+                    />
+                </div>
                 <div className="grid w-full gap-1.5">
                     <Label htmlFor="message">Content</Label>
                     <Textarea