Profile Actions

1'use client';
2 
3import React from 'react';
4import {
5  ActionMenu,
6  ActionMenuItem,
7} from './action-menu';
8import { Button } from '../ui/button';
9import { MoreHorizontal, Share2, Flag, Ban } from 'lucide-react';
10 
11const confirmationItems = [
12  {
13    title: 'Report User?',
14    description:
15      'This will report the user for review. Please confirm.',
16    confirmText: 'Report',
17    onConfirm: () => console.log('User reported'),
18    icon: Flag,
19  }, 
20  {
21    title: 'Block User?',
22    description:
23      "This will block the user. You won't see their posts or notifications. They won't be able to follow you or message you.",
24    icon: Ban,
25    variant: 'destructive',
26    confirmText: 'Block',
27    onConfirm: () => console.log('User blocked'),
28  },
29];
30 
31export const ProfileActions = () => {
32  return (
33    <ActionMenu
34      trigger={
35        <Button variant="outline" size="icon">
36          <MoreHorizontal className="h-4 w-4" />
37        </Button>
38      }
39    >
40      <ActionMenuItem icon={Share2}>Share profile</ActionMenuItem>
41      {confirmationItems.map((item) => (
42        <ActionMenuItem
43          key={item.title}
44          icon={item.icon}
45          confirmation={{
46            title: item.title,
47            description: item.description,
48            confirmText: item.confirmText,
49            onConfirm: item.onConfirm,
50            variant: item.variant as 'destructive' | 'default' | 'success' | undefined,
51          }}
52        >
53          {item.title}
54        </ActionMenuItem>
55      ))}
56    </ActionMenu>
57  );
58};