60 lines
1.2 KiB
TypeScript
60 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
type FreshUser = {
|
|
id: number;
|
|
name: string;
|
|
avatar: string;
|
|
};
|
|
|
|
type Props = {
|
|
users: FreshUser[];
|
|
onSelectUser: (userId: number | null) => void;
|
|
};
|
|
|
|
export default function FreshPostsSlider({ users, onSelectUser }: Props) {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
gap: '0.8rem',
|
|
overflowX: 'auto',
|
|
paddingBottom: '0.5rem',
|
|
}}
|
|
>
|
|
{/* Alle */}
|
|
<button
|
|
onClick={() => onSelectUser(null)}
|
|
style={{
|
|
minWidth: '64px',
|
|
height: '64px',
|
|
borderRadius: '50%',
|
|
border: '2px solid #ccc',
|
|
background: '#f5f5f5',
|
|
cursor: 'pointer',
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
Alle
|
|
</button>
|
|
|
|
{users.map((user) => (
|
|
<button
|
|
key={user.id}
|
|
onClick={() => onSelectUser(user.id)}
|
|
style={{
|
|
minWidth: '64px',
|
|
height: '64px',
|
|
borderRadius: '50%',
|
|
border: '2px solid #2E7D32',
|
|
backgroundImage: `url(${user.avatar})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
cursor: 'pointer',
|
|
}}
|
|
title={user.name}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|