I've been struggling to find a straightforward solution to this issue for a while now.
Let me break it down - I need to display some data on the left side of a post card component with a button located right next to it. Here's an illustration:
https://i.sstatic.net/1dlRf.png
The ellipsis icon represents the button, and my goal is to position it on the right side. However, if I use 'absolute' positioning, all buttons are fixed in place even when scrolling.
Below is the code for the two components:
import * as React from 'react';
import { Button } from '@/components/ui/button';
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Ellipsis } from 'lucide-react';
import { PostDialog } from './PostDialog';
// Props interface
export default async function Post({
user_id,
avatar_url,
first_name,
last_name,
connections,
timestamp,
content,
}: Props) {
// Rest of the code here...
Here is a snippet of the button component:
'use client';
import * as React from 'react';
import { Ellipsis, Moon, Sun } from 'lucide-react';
import { useTheme } from 'next-themes';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { deletePost } from '@/lib/actions/post.actions';
// Function for handling the dialog
export function PostDialog() {
// handleDeletePost function
return (
// Return statement here...
);
}
Your attention is greatly appreciated, thank you!