Spaces:
Running
Running
File size: 2,894 Bytes
1006c22 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
'use client';
import { Message } from '@prisma/client';
import React from 'react';
import { Card } from '@/components/ui/Card';
import Img from '@/components/ui/Img';
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/Dialog';
import { Button } from '@/components/ui/Button';
import { IconArrowUpRight } from '@/components/ui/Icons';
import { FixedSizeGrid } from 'react-window';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
export interface MessageGridProps {
messages: Pick<Message, 'chatId' | 'id' | 'mediaUrl' | 'prompt'>[];
}
const MessageGrid: React.FC<MessageGridProps> = ({ messages }) => {
return (
<FixedSizeGrid
columnCount={2}
columnWidth={590}
height={1200}
rowCount={Math.round(messages.length / 2 + 1)}
rowHeight={120}
width={1200}
>
{({ columnIndex, rowIndex, style }) => {
const messageIndex = rowIndex * 2 + columnIndex;
if (messageIndex > messages.length - 1) return null;
const message = messages[rowIndex * 2 + columnIndex];
const { mediaUrl, prompt, id, chatId } = message;
return (
<div style={style} className="p-2 relative">
<Card className="relative flex size-full" key={id}>
<div className="h-full w-48 min-w-48 relative">
<Dialog>
<DialogTrigger asChild>
<Img
src={mediaUrl}
alt={prompt}
className="object-cover size-full cursor-pointer"
/>
</DialogTrigger>
<DialogContent className="max-w-5xl">
<>
{mediaUrl?.endsWith('.mp4') ? (
<video
src={mediaUrl}
controls
width={1200}
height={800}
/>
) : (
<Img
src={mediaUrl}
alt={prompt}
quality={100}
width={1200}
height={800}
/>
)}
</>
</DialogContent>
</Dialog>
</div>
<div className="m-2 grow-1 flex flex-col overflow-hidden">
<p className="text-sm">{prompt}</p>
</div>
<Link
className="size-6 absolute right-1 bottom-1"
href={`/chat/${chatId}`}
target="_blank"
>
<IconArrowUpRight className="size-3" />
</Link>
</Card>
</div>
);
}}
</FixedSizeGrid>
);
};
export default MessageGrid;
|