Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 admin
|
13f2dedf13 | ||
|
admin
|
34ace67d1f | ||
|
admin
|
ab88d6e1bc | ||
|
admin
|
6ebbd5d457 |
@@ -1,242 +1,119 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import CommentModal from '../CommentModal/CommentModal';
|
||||
import { useRef } from 'react';
|
||||
|
||||
type Comment = {
|
||||
export type PostCardData = {
|
||||
id: number;
|
||||
author: string;
|
||||
petName: string;
|
||||
petType: 'Hund' | 'Katze';
|
||||
authorName: string;
|
||||
createdAt: string;
|
||||
text: string;
|
||||
};
|
||||
|
||||
type Media = {
|
||||
type: 'image' | 'video';
|
||||
url: string;
|
||||
aspect: '1:1' | '9:16';
|
||||
likesCount: number;
|
||||
commentsCount: number;
|
||||
|
||||
};
|
||||
|
||||
type PostCardProps = {
|
||||
petName: string;
|
||||
petType: 'Hund' | 'Katze';
|
||||
ownerName?: string;
|
||||
text: string;
|
||||
createdAt: string;
|
||||
media?: Media;
|
||||
likes: number;
|
||||
likedByCurrentUser?: boolean;
|
||||
commentsCount: number;
|
||||
commentsList: Comment[];
|
||||
post: PostCardData;
|
||||
isDiscovery?: boolean
|
||||
onOpenPreview: (post: PostCardData) => void;
|
||||
onCommentClick?: (post: PostCardData) => void;
|
||||
|
||||
|
||||
};
|
||||
|
||||
// 🔐 Simulierter eingeloggter User
|
||||
const CURRENT_USER_ID = 1;
|
||||
|
||||
export default function PostCard({
|
||||
petName,
|
||||
petType,
|
||||
ownerName,
|
||||
text,
|
||||
createdAt,
|
||||
media,
|
||||
likes,
|
||||
likedByCurrentUser,
|
||||
commentsCount,
|
||||
commentsList,
|
||||
post,
|
||||
onOpenPreview,
|
||||
onCommentClick,
|
||||
isDiscovery,
|
||||
}: PostCardProps) {
|
||||
const [showComments, setShowComments] = useState(false);
|
||||
const [showMediaFullscreen, setShowMediaFullscreen] = useState(false);
|
||||
const likeRef = useRef<HTMLButtonElement | null>(null);
|
||||
const commentRef = useRef<HTMLButtonElement | null>(null);
|
||||
|
||||
const [localLikes, setLocalLikes] = useState(likes);
|
||||
const [liked, setLiked] = useState(!!likedByCurrentUser);
|
||||
|
||||
const isSquare = media?.aspect === '1:1';
|
||||
|
||||
// ⛔ Scroll sperren bei Vollbild
|
||||
useEffect(() => {
|
||||
if (showMediaFullscreen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
}, [showMediaFullscreen]);
|
||||
function animate(
|
||||
ref: React.RefObject<HTMLButtonElement>,
|
||||
animation: string
|
||||
) {
|
||||
if (!ref.current) return;
|
||||
const el = ref.current;
|
||||
el.style.animation = animation;
|
||||
el.addEventListener(
|
||||
'animationend',
|
||||
() => {
|
||||
el.style.animation = '';
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<article
|
||||
style={{
|
||||
border: '1px solid #e5e5e5',
|
||||
borderRadius: '16px',
|
||||
backgroundColor: 'white',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
<article
|
||||
className={`postcard ${
|
||||
isDiscovery ? 'postcard--discovery' : ''
|
||||
}`}
|
||||
>
|
||||
|
||||
{/* Klickbarer Bereich → Preview */}
|
||||
<div
|
||||
className="postcard-main"
|
||||
onClick={() => onOpenPreview(post)}
|
||||
>
|
||||
{/* HEADER */}
|
||||
<header style={{ padding: '1rem', display: 'grid', gap: '0.2rem' }}>
|
||||
<div style={{ fontWeight: 800, fontSize: '1.1rem' }}>
|
||||
{petName}{' '}
|
||||
<span style={{ fontWeight: 500, color: '#666' }}>
|
||||
({petType})
|
||||
</span>
|
||||
</div>
|
||||
<div className="postcard-media" />
|
||||
|
||||
<div style={{ fontSize: '0.8rem', color: '#777' }}>
|
||||
{createdAt}
|
||||
{ownerName && (
|
||||
<>
|
||||
{' · '}
|
||||
<span style={{ fontStyle: 'italic' }}>
|
||||
verwaltet von {ownerName}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
<div className="postcard-content">
|
||||
<div className="postcard-header">
|
||||
{isDiscovery && (
|
||||
<div className="post-discovery-wrapper">
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* MEDIA */}
|
||||
{media && (
|
||||
<div
|
||||
onClick={() => setShowMediaFullscreen(true)}
|
||||
style={{
|
||||
width: '100%',
|
||||
aspectRatio: isSquare ? '1 / 1' : '9 / 16',
|
||||
backgroundColor: '#000',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{media.type === 'image' && (
|
||||
<img
|
||||
src={media.url}
|
||||
alt={petName}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className="postcard-title-row">
|
||||
<strong className="postcard-title">
|
||||
{post.petName}
|
||||
</strong>
|
||||
<span className="postcard-meta">
|
||||
· {post.petType} · {post.authorName} · {post.createdAt}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{media.type === 'video' && (
|
||||
<video
|
||||
src={media.url}
|
||||
muted
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* TEXT */}
|
||||
<div style={{ padding: '1rem', fontSize: '0.95rem' }}>
|
||||
{text}
|
||||
<p className="postcard-text">{post.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FOOTER */}
|
||||
<footer
|
||||
style={{
|
||||
padding: '0 1rem 1rem',
|
||||
display: 'flex',
|
||||
gap: '1.2rem',
|
||||
fontSize: '0.85rem',
|
||||
{/* Interaktionen */}
|
||||
<div className="postcard-actions">
|
||||
<button
|
||||
ref={likeRef}
|
||||
type="button"
|
||||
className="postcard-action"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
animate(likeRef, 'heart-pop 0.3s ease');
|
||||
// später: Like-Logik
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setLiked(!liked);
|
||||
setLocalLikes((prev) => (liked ? prev - 1 : prev + 1));
|
||||
<span aria-hidden>❤️</span>
|
||||
<span>{post.likesCount}</span>
|
||||
</button>
|
||||
|
||||
console.log('LIKE', {
|
||||
byUser: CURRENT_USER_ID,
|
||||
pet: petName,
|
||||
});
|
||||
}}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontWeight: 600,
|
||||
color: liked ? '#d32f2f' : '#555',
|
||||
}}
|
||||
>
|
||||
❤️ {localLikes}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowComments(true)}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontWeight: 600,
|
||||
color: '#2E7D32',
|
||||
}}
|
||||
>
|
||||
💬 {commentsCount} Kommentare
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
{/* 💬 Kommentare */}
|
||||
{showComments && (
|
||||
<CommentModal
|
||||
comments={commentsList}
|
||||
onClose={() => setShowComments(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 🖼️ MEDIA FULLSCREEN */}
|
||||
{showMediaFullscreen && media && (
|
||||
<div
|
||||
onClick={() => setShowMediaFullscreen(false)}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.9)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 2000,
|
||||
cursor: 'zoom-out',
|
||||
<button
|
||||
ref={commentRef}
|
||||
type="button"
|
||||
className="postcard-action"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
animate(commentRef, 'comment-wiggle 0.25s ease');
|
||||
onCommentClick?.(post);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
maxWidth: '95vw',
|
||||
maxHeight: '95vh',
|
||||
}}
|
||||
>
|
||||
{media.type === 'image' && (
|
||||
<img
|
||||
src={media.url}
|
||||
alt={petName}
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit: 'contain',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{media.type === 'video' && (
|
||||
<video
|
||||
src={media.url}
|
||||
controls
|
||||
autoPlay
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
<span aria-hidden>💬</span>
|
||||
<span>{post.commentsCount}</span>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
+89
-335
@@ -1,26 +1,15 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState } from 'react';
|
||||
import PostCard, {
|
||||
PostCardData,
|
||||
} from '@/app/components/PostCard/PostCard';
|
||||
|
||||
type ExplorePet = {
|
||||
id: number;
|
||||
name: string;
|
||||
type: 'Hund' | 'Katze';
|
||||
};
|
||||
/* =======================
|
||||
MOCK DATA
|
||||
======================= */
|
||||
|
||||
type ExplorePost = {
|
||||
id: number;
|
||||
petId: number;
|
||||
petName: string;
|
||||
petType: 'Hund' | 'Katze';
|
||||
authorName: string;
|
||||
createdAt: string;
|
||||
text: string;
|
||||
likesCount: number;
|
||||
commentsCount: number;
|
||||
};
|
||||
|
||||
const trendingPets: ExplorePet[] = [
|
||||
const trendingPets = [
|
||||
{ id: 1, name: 'Luna', type: 'Katze' },
|
||||
{ id: 2, name: 'Bello', type: 'Hund' },
|
||||
{ id: 3, name: 'Milo', type: 'Katze' },
|
||||
@@ -29,10 +18,9 @@ const trendingPets: ExplorePet[] = [
|
||||
{ id: 6, name: 'Leo', type: 'Hund' },
|
||||
];
|
||||
|
||||
const latestPosts: ExplorePost[] = [
|
||||
const latestPosts: PostCardData[] = [
|
||||
{
|
||||
id: 101,
|
||||
petId: 1,
|
||||
petName: 'Luna',
|
||||
petType: 'Katze',
|
||||
authorName: 'Anna',
|
||||
@@ -43,7 +31,6 @@ const latestPosts: ExplorePost[] = [
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
petId: 2,
|
||||
petName: 'Bello',
|
||||
petType: 'Hund',
|
||||
authorName: 'Markus',
|
||||
@@ -54,7 +41,6 @@ const latestPosts: ExplorePost[] = [
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
petId: 3,
|
||||
petName: 'Milo',
|
||||
petType: 'Katze',
|
||||
authorName: 'Sophie',
|
||||
@@ -65,7 +51,6 @@ const latestPosts: ExplorePost[] = [
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
petId: 4,
|
||||
petName: 'Rocky',
|
||||
petType: 'Hund',
|
||||
authorName: 'Timo',
|
||||
@@ -76,15 +61,20 @@ const latestPosts: ExplorePost[] = [
|
||||
},
|
||||
];
|
||||
|
||||
/* =======================
|
||||
PAGE
|
||||
======================= */
|
||||
|
||||
export default function ExplorePage() {
|
||||
const [activeFilter, setActiveFilter] = useState<
|
||||
'ALLE' | 'HUND' | 'KATZE'
|
||||
>('ALLE');
|
||||
const [activeFilter, setActiveFilter] =
|
||||
useState<'ALLE' | 'HUND' | 'KATZE'>('ALLE');
|
||||
|
||||
const [previewPost, setPreviewPost] = useState<ExplorePost | null>(null);
|
||||
const [openComments, setOpenComments] = useState(false);
|
||||
const [previewPost, setPreviewPost] =
|
||||
useState<PostCardData | null>(null);
|
||||
|
||||
// Swipe-Down Handling fürs Modal
|
||||
const [openComments, setOpenComments] = useState(false);
|
||||
|
||||
// Swipe-Down fürs Modal
|
||||
const startY = useRef<number | null>(null);
|
||||
|
||||
const filteredPosts = latestPosts.filter((p) => {
|
||||
@@ -96,90 +86,46 @@ const [openComments, setOpenComments] = useState(false);
|
||||
return (
|
||||
<>
|
||||
{/* ================= HEADER / FILTER ================= */}
|
||||
<section
|
||||
style={{
|
||||
padding: '1rem',
|
||||
display: 'grid',
|
||||
gap: '1rem',
|
||||
maxWidth: '720px',
|
||||
margin: '0 auto',
|
||||
}}
|
||||
>
|
||||
<section className="explore-header">
|
||||
<header>
|
||||
<h1 style={{ marginBottom: '0.3rem' }}>Entdecken</h1>
|
||||
<p style={{ margin: 0, color: '#666' }}>
|
||||
Neue Tiere, Trends & besondere Momente
|
||||
</p>
|
||||
<h1>Entdecken</h1>
|
||||
<p>Neue Tiere, Trends & besondere Momente</p>
|
||||
</header>
|
||||
|
||||
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
||||
<div className="explore-filter">
|
||||
{[
|
||||
{ key: 'ALLE', label: 'Alle' },
|
||||
{ key: 'HUND', label: 'Hunde' },
|
||||
{ key: 'KATZE', label: 'Katzen' },
|
||||
].map((f) => {
|
||||
const active = activeFilter === f.key;
|
||||
return (
|
||||
<button
|
||||
key={f.key}
|
||||
onClick={() =>
|
||||
setActiveFilter(f.key as 'ALLE' | 'HUND' | 'KATZE')
|
||||
}
|
||||
style={{
|
||||
padding: '0.45rem 0.9rem',
|
||||
borderRadius: '999px',
|
||||
border: active ? 'none' : '1px solid #ccc',
|
||||
backgroundColor: active ? '#2E7D32' : 'white',
|
||||
color: active ? 'white' : 'inherit',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: active ? 600 : 400,
|
||||
cursor: 'pointer',
|
||||
transform: active ? 'scale(1.05)' : 'scale(1)',
|
||||
transition:
|
||||
'background-color 0.2s ease, transform 0.15s ease',
|
||||
}}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
].map((f) => (
|
||||
<button
|
||||
key={f.key}
|
||||
className={
|
||||
activeFilter === f.key
|
||||
? 'filter-button active'
|
||||
: 'filter-button'
|
||||
}
|
||||
onClick={() =>
|
||||
setActiveFilter(f.key as 'ALLE' | 'HUND' | 'KATZE')
|
||||
}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ================= BELIEBTE TIERE ================= */}
|
||||
<section style={{ paddingLeft: '1rem', marginBottom: '1.5rem' }}>
|
||||
<strong style={{ display: 'block', marginBottom: '0.6rem' }}>
|
||||
Beliebte Tiere
|
||||
</strong>
|
||||
<section className="explore-trending">
|
||||
<strong>Beliebte Tiere</strong>
|
||||
|
||||
<div
|
||||
className="hide-scrollbar"
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '0.8rem',
|
||||
overflowX: 'auto',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
}}
|
||||
>
|
||||
<div className="trending-scroll hide-scrollbar">
|
||||
{trendingPets.map((pet) => (
|
||||
<div key={pet.id} style={{ width: '84px', flex: '0 0 auto' }}>
|
||||
<div
|
||||
style={{
|
||||
width: '84px',
|
||||
height: '84px',
|
||||
borderRadius: '18px',
|
||||
backgroundColor: '#f2f2f2',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '1.4rem',
|
||||
}}
|
||||
>
|
||||
🐾
|
||||
</div>
|
||||
<div style={{ marginTop: '0.4rem', fontSize: '0.72rem' }}>
|
||||
<div key={pet.id} className="trending-item">
|
||||
<div className="trending-avatar">🐾</div>
|
||||
<div className="trending-meta">
|
||||
<strong>{pet.name}</strong>
|
||||
<div style={{ color: '#777' }}>{pet.type}</div>
|
||||
<span>{pet.type}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -187,151 +133,23 @@ const [openComments, setOpenComments] = useState(false);
|
||||
</section>
|
||||
|
||||
{/* ================= POSTS ================= */}
|
||||
<section
|
||||
style={{
|
||||
padding: '0 1rem 1rem',
|
||||
maxWidth: '720px',
|
||||
margin: '0 auto',
|
||||
}}
|
||||
>
|
||||
<strong style={{ display: 'block', marginBottom: '0.6rem' }}>
|
||||
Neueste Beiträge
|
||||
</strong>
|
||||
<section className="explore-posts">
|
||||
<strong>Neueste Beiträge</strong>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.9rem' }}>
|
||||
<div className="post-list">
|
||||
{filteredPosts.map((post) => (
|
||||
<article
|
||||
<PostCard
|
||||
key={post.id}
|
||||
style={{
|
||||
border: '1px solid #eee',
|
||||
borderRadius: '18px',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'white',
|
||||
post={post}
|
||||
onOpenPreview={(p) => {
|
||||
setOpenComments(false);
|
||||
setPreviewPost(p);
|
||||
}}
|
||||
>
|
||||
{/* ✅ Nur dieser Bereich öffnet das Modal */}
|
||||
<div
|
||||
onClick={() => setPreviewPost(post)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
aspectRatio: '3 / 2',
|
||||
backgroundColor: '#eaeaea',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ padding: '0.8rem', display: 'grid', gap: '0.35rem' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
gap: '0.6rem',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<strong>{post.petName}</strong>{' '}
|
||||
<span style={{ color: '#777', fontSize: '0.8rem' }}>
|
||||
· {post.petType} · {post.authorName}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
style={{
|
||||
color: '#777',
|
||||
fontSize: '0.8rem',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{post.createdAt}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p style={{ margin: 0, fontSize: '0.9rem' }}>{post.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ✅ Interaktionszeile (öffnet KEIN Modal) */}
|
||||
<div
|
||||
style={{
|
||||
padding: '0 0.8rem 0.8rem',
|
||||
display: 'flex',
|
||||
gap: '1rem',
|
||||
fontSize: '0.85rem',
|
||||
color: '#555',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
const el = e.currentTarget;
|
||||
el.style.animation = 'heart-pop 0.3s ease';
|
||||
el.addEventListener(
|
||||
'animationend',
|
||||
() => {
|
||||
el.style.animation = '';
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
|
||||
console.log('LIKE CLICK', post.id);
|
||||
}}
|
||||
style={{
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
padding: 0,
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
gap: '0.35rem',
|
||||
alignItems: 'center',
|
||||
color: 'inherit',
|
||||
}}
|
||||
>
|
||||
<span aria-hidden>❤️</span>
|
||||
<span>{post.likesCount}</span>
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
// Animation
|
||||
const el = e.currentTarget;
|
||||
el.style.animation = 'comment-wiggle 0.25s ease';
|
||||
el.addEventListener(
|
||||
'animationend',
|
||||
() => {
|
||||
el.style.animation = '';
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
|
||||
// 👉 LOGIK
|
||||
setOpenComments(true);
|
||||
setPreviewPost(post);
|
||||
}}
|
||||
style={{
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
padding: 0,
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
gap: '0.35rem',
|
||||
alignItems: 'center',
|
||||
color: 'inherit',
|
||||
}}
|
||||
>
|
||||
<span aria-hidden>💬</span>
|
||||
<span>{post.commentsCount}</span>
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
</article>
|
||||
onCommentClick={(p) => {
|
||||
setOpenComments(true);
|
||||
setPreviewPost(p);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
@@ -339,127 +157,63 @@ const [openComments, setOpenComments] = useState(false);
|
||||
{/* ================= PREVIEW MODAL ================= */}
|
||||
{previewPost && (
|
||||
<div
|
||||
onClick={() => setPreviewPost(null)}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||
zIndex: 50,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-end',
|
||||
className="post-preview-overlay"
|
||||
onClick={() => {
|
||||
setPreviewPost(null);
|
||||
setOpenComments(false);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="post-preview-modal"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onTouchStart={(e) => (startY.current = e.touches[0].clientY)}
|
||||
onTouchStart={(e) =>
|
||||
(startY.current = e.touches[0].clientY)
|
||||
}
|
||||
onTouchEnd={(e) => {
|
||||
if (
|
||||
startY.current &&
|
||||
e.changedTouches[0].clientY - startY.current > 80
|
||||
) {
|
||||
setPreviewPost(null);
|
||||
setOpenComments(false);
|
||||
|
||||
setOpenComments(false);
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
width: '100%',
|
||||
maxWidth: '720px',
|
||||
borderTopLeftRadius: '22px',
|
||||
borderTopRightRadius: '22px',
|
||||
padding: '1rem',
|
||||
animation: 'slideUp 0.25s ease',
|
||||
paddingBottom: '5rem',
|
||||
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '4px',
|
||||
borderRadius: '999px',
|
||||
backgroundColor: '#ccc',
|
||||
margin: '0 auto 0.8rem',
|
||||
}}
|
||||
/>
|
||||
<div className="modal-handle" />
|
||||
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
aspectRatio: '3 / 2',
|
||||
backgroundColor: '#eaeaea',
|
||||
borderRadius: '14px',
|
||||
marginBottom: '0.8rem',
|
||||
}}
|
||||
/>
|
||||
<div className="modal-media" />
|
||||
|
||||
<strong>{previewPost.petName}</strong>{' '}
|
||||
<span style={{ color: '#777', fontSize: '0.85rem' }}>
|
||||
<span className="modal-meta">
|
||||
· {previewPost.petType} · {previewPost.authorName}
|
||||
</span>
|
||||
|
||||
<p style={{ marginTop: '0.6rem' }}>{previewPost.text}</p>
|
||||
{openComments && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: '1rem',
|
||||
paddingTop: '0.8rem',
|
||||
borderTop: '1px solid #eee',
|
||||
}}
|
||||
>
|
||||
<strong style={{ fontSize: '0.9rem' }}>Kommentare</strong>
|
||||
<p className="modal-text">{previewPost.text}</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginTop: '0.6rem',
|
||||
fontSize: '0.85rem',
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
Noch keine Kommentare.
|
||||
</div>
|
||||
<div className="modal-stats">
|
||||
<span>❤️ {previewPost.likesCount}</span>
|
||||
<span>💬 {previewPost.commentsCount}</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
placeholder="Kommentar schreiben…"
|
||||
style={{
|
||||
marginTop: '0.6rem',
|
||||
width: '100%',
|
||||
padding: '0.6rem 0.8rem',
|
||||
borderRadius: '999px',
|
||||
border: '1px solid #ccc',
|
||||
fontSize: '0.85rem',
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{openComments && (
|
||||
<div className="modal-comments">
|
||||
<strong>Kommentare</strong>
|
||||
<p className="modal-comment-empty">
|
||||
Noch keine Kommentare.
|
||||
</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginTop: '1rem',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '0.9rem', color: '#555', display: 'flex', gap: '1rem' }}>
|
||||
<span>❤️ {previewPost.likesCount}</span>
|
||||
<span>💬 {previewPost.commentsCount}</span>
|
||||
<input
|
||||
className="modal-comment-input"
|
||||
placeholder="Kommentar schreiben…"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="modal-actions">
|
||||
<a
|
||||
href={`/post/${previewPost.id}`}
|
||||
style={{
|
||||
padding: '0.5rem 0.9rem',
|
||||
borderRadius: '999px',
|
||||
backgroundColor: '#2E7D32',
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
fontSize: '0.85rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
className="modal-open-post"
|
||||
>
|
||||
Zum Beitrag
|
||||
</a>
|
||||
|
||||
+207
-149
@@ -1,179 +1,237 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import PostCard from '../components/PostCard/PostCard';
|
||||
import FreshPostsSlider from '../components/FreshPostsSlider/FreshPostsSlider';
|
||||
import { useRef, useState } from 'react';
|
||||
import PostCard, {
|
||||
PostCardData,
|
||||
} from '@/app/components/PostCard/PostCard';
|
||||
|
||||
/* ---------------- TYPES ---------------- */
|
||||
/* =======================
|
||||
MOCK: USER KONTEXT
|
||||
======================= */
|
||||
|
||||
type Comment = {
|
||||
id: number;
|
||||
author: string;
|
||||
text: string;
|
||||
};
|
||||
|
||||
type Media = {
|
||||
type: 'image' | 'video';
|
||||
url: string;
|
||||
aspect: '1:1' | '9:16';
|
||||
};
|
||||
|
||||
type FeedPost = {
|
||||
id: number;
|
||||
|
||||
// 🐾 Tier (Absender)
|
||||
petId: number;
|
||||
petName: string;
|
||||
petType: 'Hund' | 'Katze';
|
||||
|
||||
// 👤 Admin (sekundär)
|
||||
ownerId: number;
|
||||
ownerName: string;
|
||||
|
||||
// 📝 Inhalt
|
||||
text: string;
|
||||
createdAt: string;
|
||||
|
||||
// 📸 / 🎥 Media
|
||||
media?: Media;
|
||||
|
||||
// ❤️ Interaktion
|
||||
likes: number;
|
||||
//likedByCurrentUser: number; // ✅ FEHLTE
|
||||
commentsCount: number;
|
||||
commentsList: Comment[];
|
||||
};
|
||||
|
||||
type FeedAdmin = {
|
||||
id: number;
|
||||
name: string;
|
||||
avatar: string;
|
||||
};
|
||||
|
||||
/* ---------------- MOCK ADMINS ---------------- */
|
||||
|
||||
const mockAdmins: FeedAdmin[] = [
|
||||
const myPets = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Anna',
|
||||
avatar: 'https://i.pravatar.cc/100?img=12',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Markus',
|
||||
avatar: 'https://i.pravatar.cc/100?img=32',
|
||||
petType: 'Katze',
|
||||
breed: 'Bengal',
|
||||
ageMonths: 24,
|
||||
},
|
||||
];
|
||||
|
||||
/* ---------------- MOCK POSTS ---------------- */
|
||||
const followedPetIds = [1, 3, 5];
|
||||
|
||||
const mockPosts: FeedPost[] = [
|
||||
/* =======================
|
||||
MOCK: POSTS
|
||||
======================= */
|
||||
|
||||
type FeedPost = PostCardData & {
|
||||
petId: number;
|
||||
breed: string;
|
||||
ageMonths: number;
|
||||
};
|
||||
|
||||
const allPosts: FeedPost[] = [
|
||||
{
|
||||
id: 1,
|
||||
id: 401,
|
||||
petId: 1,
|
||||
petName: 'Luna',
|
||||
petType: 'Katze',
|
||||
|
||||
ownerId: 1,
|
||||
ownerName: 'Anna',
|
||||
|
||||
text: 'Luna genießt die Sonne auf dem Balkon ☀️',
|
||||
createdAt: 'vor 2 Stunden',
|
||||
|
||||
media: {
|
||||
type: 'image',
|
||||
url: 'https://placekitten.com/600/600',
|
||||
aspect: '1:1',
|
||||
},
|
||||
|
||||
likes: 12,
|
||||
breed: 'Bengal',
|
||||
ageMonths: 26,
|
||||
authorName: 'Anna',
|
||||
createdAt: 'vor 10 Minuten',
|
||||
text: 'Luna liebt den neuen Kratzbaum.',
|
||||
likesCount: 8,
|
||||
commentsCount: 2,
|
||||
commentsList: [
|
||||
{ id: 1, author: 'Lisa', text: 'Wie süß 😍' },
|
||||
{ id: 2, author: 'Tom', text: 'Typisch Katze!' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
id: 402,
|
||||
petId: 2,
|
||||
petName: 'Bello',
|
||||
petName: 'Rocky',
|
||||
petType: 'Hund',
|
||||
|
||||
ownerId: 2,
|
||||
ownerName: 'Markus',
|
||||
|
||||
text: 'Spaziergang im Park – jemand hatte sehr viel Energie 🐕',
|
||||
createdAt: 'heute Morgen',
|
||||
|
||||
media: {
|
||||
type: 'video',
|
||||
url: 'https://www.w3schools.com/html/mov_bbb.mp4',
|
||||
aspect: '9:16',
|
||||
},
|
||||
|
||||
likes: 20,
|
||||
|
||||
|
||||
commentsCount: 0,
|
||||
commentsList: [],
|
||||
breed: 'Labrador',
|
||||
ageMonths: 30,
|
||||
authorName: 'Tim',
|
||||
createdAt: 'vor 1 Stunde',
|
||||
text: 'Rocky war schwimmen 🐕🦺',
|
||||
likesCount: 15,
|
||||
commentsCount: 4,
|
||||
},
|
||||
{
|
||||
id: 403,
|
||||
petId: 3,
|
||||
petName: 'Milo',
|
||||
petType: 'Katze',
|
||||
breed: 'Bengal',
|
||||
ageMonths: 22,
|
||||
authorName: 'Sophie',
|
||||
createdAt: 'heute',
|
||||
text: 'Milo entdeckt den Balkon.',
|
||||
likesCount: 11,
|
||||
commentsCount: 3,
|
||||
},
|
||||
{
|
||||
id: 404,
|
||||
petId: 4,
|
||||
petName: 'Nala',
|
||||
petType: 'Katze',
|
||||
breed: 'Maine Coon',
|
||||
ageMonths: 40,
|
||||
authorName: 'Laura',
|
||||
createdAt: 'gestern',
|
||||
text: 'Nala beobachtet alles ganz ruhig.',
|
||||
likesCount: 6,
|
||||
commentsCount: 1,
|
||||
},
|
||||
];
|
||||
|
||||
/* ---------------- PAGE ---------------- */
|
||||
/* =======================
|
||||
RELEVANZ LOGIK
|
||||
======================= */
|
||||
|
||||
function relevanceScore(post: FeedPost) {
|
||||
let score = 0;
|
||||
|
||||
myPets.forEach((pet) => {
|
||||
if (post.petType === pet.petType) score += 3;
|
||||
if (post.breed === pet.breed) score += 5;
|
||||
if (Math.abs(post.ageMonths - pet.ageMonths) <= 6) score += 2;
|
||||
});
|
||||
|
||||
score += Math.min(post.likesCount / 10, 3);
|
||||
score += Math.min(post.commentsCount / 5, 2);
|
||||
|
||||
return score;
|
||||
}
|
||||
|
||||
/* =======================
|
||||
PAGE
|
||||
======================= */
|
||||
|
||||
export default function FeedPage() {
|
||||
const [selectedOwnerId, setSelectedOwnerId] = useState<number | null>(null);
|
||||
const [previewPost, setPreviewPost] =
|
||||
useState<PostCardData | null>(null);
|
||||
const [openComments, setOpenComments] = useState(false);
|
||||
|
||||
const visiblePosts = selectedOwnerId
|
||||
? mockPosts.filter((post) => post.ownerId === selectedOwnerId)
|
||||
: mockPosts;
|
||||
const startY = useRef<number | null>(null);
|
||||
|
||||
/* =======================
|
||||
FEED ZUSAMMENSTELLEN
|
||||
======================= */
|
||||
|
||||
const subscribedPosts = allPosts.filter((post) =>
|
||||
followedPetIds.includes(post.petId)
|
||||
);
|
||||
|
||||
const discoveryPosts = allPosts
|
||||
.filter((post) => !followedPetIds.includes(post.petId))
|
||||
.sort((a, b) => relevanceScore(b) - relevanceScore(a));
|
||||
|
||||
const FEED_SIZE = 20;
|
||||
const DISCOVERY_RATIO = 0.15;
|
||||
|
||||
const discoveryCount = Math.max(
|
||||
1,
|
||||
Math.round(FEED_SIZE * DISCOVERY_RATIO)
|
||||
);
|
||||
|
||||
const finalFeed = [
|
||||
...subscribedPosts
|
||||
.slice(0, FEED_SIZE - discoveryCount)
|
||||
.map((p) => ({ ...p, isDiscovery: false })),
|
||||
|
||||
...discoveryPosts
|
||||
.slice(0, discoveryCount)
|
||||
.map((p) => ({ ...p, isDiscovery: true })),
|
||||
];
|
||||
|
||||
return (
|
||||
<section
|
||||
style={{
|
||||
maxWidth: '600px',
|
||||
margin: '0 auto',
|
||||
display: 'grid',
|
||||
gap: '1.5rem',
|
||||
}}
|
||||
>
|
||||
{/* HEADER */}
|
||||
<header>
|
||||
<h1 style={{ marginBottom: '0.3rem' }}>Feed</h1>
|
||||
<p style={{ margin: 0, color: '#555' }}>
|
||||
Neueste Beiträge aus der OnlyPets-Community
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* 🔄 Frische Tier-Admins Slider */}
|
||||
<FreshPostsSlider
|
||||
users={mockAdmins}
|
||||
onSelectUser={setSelectedOwnerId}
|
||||
/>
|
||||
|
||||
{/* 📰 FEED */}
|
||||
<section style={{ display: 'grid', gap: '1.5rem' }}>
|
||||
{visiblePosts.length === 0 && (
|
||||
<p style={{ color: '#777' }}>
|
||||
Keine Beiträge von diesen Tier-Admins.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{visiblePosts.map((post) => (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
petName={post.petName}
|
||||
petType={post.petType}
|
||||
ownerName={post.ownerName}
|
||||
text={post.text}
|
||||
createdAt={post.createdAt}
|
||||
media={post.media}
|
||||
likes={post.likes}
|
||||
commentsCount={post.commentsCount}
|
||||
commentsList={post.commentsList}
|
||||
/>
|
||||
))}
|
||||
<>
|
||||
{/* ================= HEADER ================= */}
|
||||
<section className="feed-header">
|
||||
<header>
|
||||
<h1>Feed</h1>
|
||||
<p>Beiträge deiner Tiere & Abos</p>
|
||||
</header>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* ================= POSTS ================= */}
|
||||
<section className="feed-posts">
|
||||
<div className="post-list">
|
||||
{finalFeed.map((post) => (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
post={post}
|
||||
isDiscovery={post.isDiscovery}
|
||||
onOpenPreview={(p) => {
|
||||
setOpenComments(false);
|
||||
setPreviewPost(p);
|
||||
}}
|
||||
onCommentClick={(p) => {
|
||||
setOpenComments(true);
|
||||
setPreviewPost(p);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ================= PREVIEW MODAL ================= */}
|
||||
{previewPost && (
|
||||
<div
|
||||
className="post-preview-overlay"
|
||||
onClick={() => {
|
||||
setPreviewPost(null);
|
||||
setOpenComments(false);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="post-preview-modal"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onTouchStart={(e) =>
|
||||
(startY.current = e.touches[0].clientY)
|
||||
}
|
||||
onTouchEnd={(e) => {
|
||||
if (
|
||||
startY.current &&
|
||||
e.changedTouches[0].clientY - startY.current > 80
|
||||
) {
|
||||
setPreviewPost(null);
|
||||
setOpenComments(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="modal-handle" />
|
||||
<div className="modal-media" />
|
||||
|
||||
<strong>{previewPost.petName}</strong>{' '}
|
||||
<span className="modal-meta">
|
||||
· {previewPost.petType} · {previewPost.authorName}
|
||||
</span>
|
||||
|
||||
<p className="modal-text">{previewPost.text}</p>
|
||||
|
||||
<div className="modal-stats">
|
||||
<span>❤️ {previewPost.likesCount}</span>
|
||||
<span>💬 {previewPost.commentsCount}</span>
|
||||
</div>
|
||||
|
||||
{openComments && (
|
||||
<div className="modal-comments">
|
||||
<strong>Kommentare</strong>
|
||||
<p className="modal-comment-empty">
|
||||
Noch keine Kommentare.
|
||||
</p>
|
||||
<input
|
||||
className="modal-comment-input"
|
||||
placeholder="Kommentar schreiben…"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+638
-14
@@ -1,23 +1,51 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
/* ===== COLORS ===== */
|
||||
--color-primary: #2e7d32;
|
||||
--color-primary-soft: #e6efe9;
|
||||
|
||||
--color-bg: #f6faf7;
|
||||
--color-surface: #ffffff;
|
||||
|
||||
--color-text-main: #1f2d24;
|
||||
--color-text-secondary: #5f6f66;
|
||||
--color-text-muted: #8a9b92;
|
||||
|
||||
--color-border: rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* ===== SHADOWS ===== */
|
||||
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08);
|
||||
--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
|
||||
|
||||
/* ===== RADIUS ===== */
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 14px;
|
||||
--radius-lg: 18px;
|
||||
|
||||
/* ===== SPACING ===== */
|
||||
--space-xs: 0.25rem;
|
||||
--space-sm: 0.5rem;
|
||||
--space-md: 1rem;
|
||||
--space-lg: 1.5rem;
|
||||
--space-xl: 2rem;
|
||||
}
|
||||
html, body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text-main);
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
@@ -96,4 +124,600 @@ body {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.postcard {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: var(--space-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.postcard:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.postcard-content {
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.postcard-actions {
|
||||
display: flex;
|
||||
gap: var(--space-md);
|
||||
align-items: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.postcard-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.postcard-action:hover {
|
||||
color: var(--color-text-main);
|
||||
}
|
||||
.postcard--discovery {
|
||||
border: 1px solid var(--color-primary);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(236, 214, 15, 0.925),
|
||||
var(--shadow-sm);
|
||||
}
|
||||
.feed-header,
|
||||
.explore-header {
|
||||
padding: var(--space-lg) var(--space-md) var(--space-md);
|
||||
}
|
||||
|
||||
/*.feed-header p,
|
||||
.explore-header p {
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0.25rem 0 0;
|
||||
}*/
|
||||
.post-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
padding-bottom: calc(var(--space-xl) + 60px);
|
||||
}
|
||||
.fresh-scroll,
|
||||
.trending-scroll {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
overflow-x: auto;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.fresh-item,
|
||||
.trending-item {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-sm);
|
||||
min-width: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.profile-header {
|
||||
display: flex;
|
||||
gap: var(--space-lg);
|
||||
padding: var(--space-lg);
|
||||
margin: var(--space-md);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.profile-avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.profile-info h1 {
|
||||
font-size: 1.3rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.profile-username {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.profile-bio {
|
||||
margin-top: var(--space-sm);
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
|
||||
.profile-stats {
|
||||
display: flex;
|
||||
gap: var(--space-lg);
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
.profile-stats div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile-stats strong {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.profile-stats span {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.profile-pets {
|
||||
margin-top: var(--space-lg);
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
.profile-pets h2 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
.pets-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: var(--space-md);
|
||||
}
|
||||
.pet-card {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: var(--space-sm);
|
||||
text-align: center;
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
.profile-posts {
|
||||
margin-top: var(--space-xl);
|
||||
}
|
||||
|
||||
.profile-posts h2 {
|
||||
font-size: 1.1rem;
|
||||
margin: 0 var(--space-md) var(--space-sm);
|
||||
}
|
||||
|
||||
.pet-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.post-preview-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
z-index: 50;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-preview-modal {
|
||||
background: var(--color-surface);
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
|
||||
/* 🔥 DAS FEHLT */
|
||||
max-height: calc(100vh - 70px); /* Platz für Statusbar */
|
||||
overflow-y: auto;
|
||||
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
padding: var(--space-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding-bottom: calc(var(--space-xl) + 60px);
|
||||
}
|
||||
|
||||
.explore-filter {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-button.active {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.explore-header,
|
||||
.explore-trending,
|
||||
.explore-posts {
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
|
||||
.explore-trending,
|
||||
.explore-posts {
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
.explore-header h1 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.explore-header p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.explore-trending strong,
|
||||
.explore-posts strong {
|
||||
display: block;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
.feed-header {
|
||||
padding: var(--space-lg) var(--space-md) var(--space-md);
|
||||
}
|
||||
|
||||
.feed-header h1 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.feed-header p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.feed-posts {
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
.feed-posts .postcard {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
.feed-header h1::after {
|
||||
content: '•';
|
||||
margin-left: 0.4rem;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.pets-page {
|
||||
padding-bottom: calc(var(--space-xl) + 60px); /* Abstand zur BottomNav */
|
||||
}
|
||||
.pets-header {
|
||||
padding: var(--space-lg) var(--space-md) var(--space-md);
|
||||
}
|
||||
|
||||
.pets-header h1 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.pets-header p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
.pets-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: var(--space-md);
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
.pet-card {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: var(--space-md);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.pet-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.pet-avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.6rem;
|
||||
margin: 0 auto var(--space-sm);
|
||||
}
|
||||
.pet-name {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pet-meta {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.pet-age {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
.pets-actions {
|
||||
margin-top: var(--space-xl);
|
||||
padding: 0 var(--space-md);
|
||||
}
|
||||
.button-primary {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.8rem 1.2rem;
|
||||
border-radius: 12px;
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: box-shadow 0.2s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.button-secondary {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.8rem 1.2rem;
|
||||
border-radius: 12px;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-main);
|
||||
border: 1px solid var(--color-border);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-danger {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
|
||||
padding: 0.8rem 1.2rem;
|
||||
border-radius: 12px; /* 🔴 gleiche Rundung wie grün */
|
||||
|
||||
background: #c62828;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: box-shadow 0.2s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.button-danger:hover {
|
||||
background: #b71c1c;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.button-danger:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.15rem 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
border-radius: 999px;
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.badge-pet {
|
||||
background: var(--color-primary-soft);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
.postcard--discovery {
|
||||
border: 1px solid var(--color-primary);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(46, 125, 50, 0.15),
|
||||
var(--shadow-sm);
|
||||
}
|
||||
.empty-state {
|
||||
padding: var(--space-xl);
|
||||
margin: var(--space-md);
|
||||
text-align: center;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px dashed var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.empty-state strong {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-main);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.empty-state span {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.empty-state--explore {
|
||||
border-style: solid;
|
||||
}
|
||||
.empty-state--pets {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
button:active,
|
||||
.button-primary:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
a {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
section + section {
|
||||
margin-top: var(--space-xl);
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
line-height: 1.25;
|
||||
}
|
||||
.pet-detail-page {
|
||||
padding-bottom: calc(var(--space-xl) + 60px); /* Platz für BottomNav */
|
||||
}
|
||||
.pet-detail-header {
|
||||
display: flex;
|
||||
gap: var(--space-lg);
|
||||
padding: var(--space-lg);
|
||||
margin: var(--space-md);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--color-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
align-items: center;
|
||||
}
|
||||
.pet-detail-avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.pet-detail-info h1 {
|
||||
font-size: 1.4rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pet-detail-meta {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.pet-detail-owner {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
.pet-detail-posts {
|
||||
margin-top: var(--space-xl);
|
||||
}
|
||||
|
||||
.pet-detail-posts h2 {
|
||||
font-size: 1.1rem;
|
||||
margin: 0 var(--space-md) var(--space-sm);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
margin: var(--space-lg) 0;
|
||||
}
|
||||
button:disabled,
|
||||
.button-primary:disabled,
|
||||
.button-secondary:disabled,
|
||||
.button-danger:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
.button-primary.is-loading,
|
||||
.button-secondary.is-loading,
|
||||
.button-danger.is-loading {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
color: transparent; /* Text ausblenden */
|
||||
}
|
||||
.button-primary.is-loading::after,
|
||||
.button-secondary.is-loading::after,
|
||||
.button-danger.is-loading::after {
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.4);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
width: 100%;
|
||||
padding: 0.7rem 2.4rem 0.7rem 0.9rem;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-text-main);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.3;
|
||||
|
||||
box-shadow: var(--shadow-sm);
|
||||
cursor: pointer;
|
||||
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%235f6f66' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.9rem center;
|
||||
}
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15);
|
||||
}
|
||||
select:disabled {
|
||||
background-color: var(--color-primary-soft);
|
||||
color: var(--color-text-muted);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
export function calculatePetAge(birthDate: string) {
|
||||
const today = new Date();
|
||||
const birth = new Date(birthDate);
|
||||
|
||||
let age = today.getFullYear() - birth.getFullYear();
|
||||
const hasHadBirthdayThisYear =
|
||||
today.getMonth() > birth.getMonth() ||
|
||||
(today.getMonth() === birth.getMonth() &&
|
||||
today.getDate() >= birth.getDate());
|
||||
|
||||
if (!hasHadBirthdayThisYear) {
|
||||
age -= 1;
|
||||
}
|
||||
|
||||
return age < 0 ? 0 : age;
|
||||
}
|
||||
|
||||
export function isBirthdayToday(birthDate: string) {
|
||||
const today = new Date();
|
||||
const birth = new Date(birthDate);
|
||||
|
||||
return (
|
||||
today.getDate() === birth.getDate() &&
|
||||
today.getMonth() === birth.getMonth()
|
||||
);
|
||||
}
|
||||
|
||||
export function formatPetAge(birthDate: string) {
|
||||
const age = calculatePetAge(birthDate);
|
||||
|
||||
if (age === 0) return 'unter 1 Jahr';
|
||||
if (age === 1) return '1 Jahr';
|
||||
return `${age} Jahre`;
|
||||
}
|
||||
@@ -1,27 +1,30 @@
|
||||
'use client';
|
||||
|
||||
import { useParams } from 'next/navigation';
|
||||
import PostCard from '@/app/components/PostCard/PostCard';
|
||||
import {calculatePetAge, formatPetAge, isBirthdayToday,} from '@/app/lib/petAge';
|
||||
|
||||
type Comment = {
|
||||
id: number;
|
||||
author: string;
|
||||
text: string;
|
||||
};
|
||||
|
||||
type PetPost = {
|
||||
id: number;
|
||||
text: string;
|
||||
createdAt: string;
|
||||
likes: number;
|
||||
commentsCount: number;
|
||||
commentsList: Comment[];
|
||||
};
|
||||
|
||||
type Pet = {
|
||||
id: number;
|
||||
name: string;
|
||||
type: 'Hund' | 'Katze';
|
||||
breed: string;
|
||||
bio?: string;
|
||||
posts: PetPost[];
|
||||
age?: string;
|
||||
owner: string;
|
||||
};
|
||||
|
||||
type Post = {
|
||||
id: number;
|
||||
petId: number;
|
||||
petName: string;
|
||||
petType: 'Hund' | 'Katze';
|
||||
author: string;
|
||||
text: string;
|
||||
createdAt: string;
|
||||
likes: number;
|
||||
comments: number;
|
||||
};
|
||||
|
||||
const mockPets: Pet[] = [
|
||||
@@ -29,76 +32,104 @@ const mockPets: Pet[] = [
|
||||
id: 1,
|
||||
name: 'Luna',
|
||||
type: 'Katze',
|
||||
breed: 'Bengal x Mix',
|
||||
bio: 'Neugierig, verspielt und liebt Sonne.',
|
||||
posts: [
|
||||
{
|
||||
id: 101,
|
||||
text: 'Luna genießt die Sonne ☀️',
|
||||
createdAt: 'vor 2 Stunden',
|
||||
likes: 12,
|
||||
commentsCount: 2,
|
||||
commentsList: [
|
||||
{ id: 1, author: 'Lisa', text: 'Wie süß 😍' },
|
||||
{ id: 2, author: 'Tom', text: 'Typisch Bengal!' },
|
||||
],
|
||||
},
|
||||
],
|
||||
breed: 'Bengal',
|
||||
age: '2 Jahre',
|
||||
owner: 'Anna',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Bello',
|
||||
type: 'Hund',
|
||||
breed: 'Labrador Retriever x Mix',
|
||||
bio: 'Immer gute Laune.',
|
||||
posts: [],
|
||||
breed: 'Labrador',
|
||||
age: '4 Jahre',
|
||||
owner: 'Markus',
|
||||
},
|
||||
];
|
||||
|
||||
type PageProps = {
|
||||
params: Promise<{ id: string }>;
|
||||
};
|
||||
const mockPosts: Post[] = [
|
||||
{
|
||||
id: 101,
|
||||
petId: 1,
|
||||
petName: 'Luna',
|
||||
petType: 'Katze',
|
||||
author: 'Anna',
|
||||
text: 'Luna liebt sonnige Nachmittage auf dem Balkon ☀️',
|
||||
createdAt: 'vor 3 Stunden',
|
||||
likes: 12,
|
||||
comments: 3,
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
petId: 1,
|
||||
petName: 'Luna',
|
||||
petType: 'Katze',
|
||||
author: 'Anna',
|
||||
text: 'Heute gab es neue Spielsachen 🧶',
|
||||
createdAt: 'gestern',
|
||||
likes: 7,
|
||||
comments: 1,
|
||||
},
|
||||
];
|
||||
|
||||
export default async function PetDetailPage({ params }: PageProps) {
|
||||
const { id } = await params; // ✅ DAS ist der entscheidende Fix
|
||||
const petId = Number(id);
|
||||
|
||||
console.log('PET ID:', petId);
|
||||
export default function PetDetailPage() {
|
||||
const params = useParams();
|
||||
const petId = Number(params.id);
|
||||
|
||||
const pet = mockPets.find((p) => p.id === petId);
|
||||
const posts = mockPosts.filter((p) => p.petId === petId);
|
||||
|
||||
if (!pet) {
|
||||
return <p>Haustier nicht gefunden.</p>;
|
||||
return (
|
||||
<div className="empty-state">
|
||||
<strong>Tier nicht gefunden</strong>
|
||||
<span>Dieses Haustier existiert nicht oder wurde entfernt.</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section style={{ maxWidth: '600px', margin: '0 auto', display: 'grid', gap: '1.5rem' }}>
|
||||
<header style={{ border: '1px solid #e5e5e5', borderRadius: '16px', padding: '1rem' }}>
|
||||
<h1>{pet.name}</h1>
|
||||
<div>{pet.type} · {pet.breed}</div>
|
||||
{pet.bio && <p>{pet.bio}</p>}
|
||||
<section className="pet-detail-page">
|
||||
{/* Header */}
|
||||
<header className="pet-detail-header">
|
||||
<div className="pet-detail-avatar">🐾</div>
|
||||
|
||||
<div className="pet-detail-info">
|
||||
<h1>{pet.name}</h1>
|
||||
|
||||
<span className="pet-detail-meta">
|
||||
{pet.type} · {pet.breed}
|
||||
{pet.birthDate && ` · ${formatPetAge(pet.birthDate)}`}
|
||||
</span>
|
||||
|
||||
|
||||
<span className="pet-detail-owner">
|
||||
Betreut von {pet.owner}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section style={{ display: 'grid', gap: '1.2rem' }}>
|
||||
{/* Posts */}
|
||||
<section className="pet-detail-posts">
|
||||
<h2>Beiträge</h2>
|
||||
|
||||
{pet.posts.length === 0 && (
|
||||
<p style={{ color: '#777' }}>Dieses Haustier hat noch keine Beiträge.</p>
|
||||
{posts.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<strong>Noch keine Beiträge</strong>
|
||||
<span>
|
||||
Für {pet.name} wurden noch keine Beiträge erstellt.
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="post-list">
|
||||
{posts.map((post) => (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
post={post}
|
||||
isDiscovery={false}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pet.posts.map((post) => (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
petName={pet.name}
|
||||
petType={pet.type}
|
||||
author="Du"
|
||||
text={post.text}
|
||||
createdAt={post.createdAt}
|
||||
likes={post.likes}
|
||||
commentsCount={post.commentsCount}
|
||||
commentsList={post.commentsList}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
</section>
|
||||
);
|
||||
|
||||
+134
-125
@@ -2,37 +2,43 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { dogBreeds, catBreeds } from '@/app/data/breeds';
|
||||
|
||||
type PetType = 'Hund' | 'Katze' | '';
|
||||
|
||||
export default function NewPetPage() {
|
||||
const router = useRouter();
|
||||
|
||||
// Pflichtfelder
|
||||
const [name, setName] = useState('');
|
||||
const [type, setType] = useState<PetType>('');
|
||||
const [breed, setBreed] = useState('');
|
||||
const [breedSearch, setBreedSearch] = useState('');
|
||||
|
||||
// Erweiterte Felder
|
||||
const [birthDate, setBirthDate] = useState('');
|
||||
const [ageFallback, setAgeFallback] = useState('');
|
||||
const [gender, setGender] = useState<'Männlich' | 'Weiblich' | 'Unbekannt'>(
|
||||
'Unbekannt'
|
||||
);
|
||||
const [bio, setBio] = useState('');
|
||||
const [visibility, setVisibility] = useState<'public' | 'followers'>(
|
||||
'public'
|
||||
);
|
||||
|
||||
// UX States
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState('');
|
||||
|
||||
const breeds =
|
||||
type === 'Hund'
|
||||
? dogBreeds
|
||||
: type === 'Katze'
|
||||
? catBreeds
|
||||
: [];
|
||||
const breeds = type === 'Hund' ? dogBreeds : catBreeds;
|
||||
|
||||
const filteredBreeds = breeds.filter((b) =>
|
||||
b.toLowerCase().includes(breedSearch.toLowerCase())
|
||||
);
|
||||
|
||||
function handleSubmit(event: React.FormEvent) {
|
||||
event.preventDefault();
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setSuccess('');
|
||||
|
||||
if (!name.trim()) {
|
||||
setError('Bitte gib einen Namen für dein Haustier ein.');
|
||||
setError('Bitte gib einen Namen für dein Tier an.');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -42,120 +48,80 @@ export default function NewPetPage() {
|
||||
}
|
||||
|
||||
if (!breed) {
|
||||
setError('Bitte wähle eine Rasse aus.');
|
||||
setError('Bitte wähle eine Rasse oder „Mix“ aus.');
|
||||
return;
|
||||
}
|
||||
|
||||
const newPetPayload = {
|
||||
const petPayload = {
|
||||
name,
|
||||
type,
|
||||
breed,
|
||||
bio: bio || null,
|
||||
createdAt: new Date().toISOString(),
|
||||
birthDate: birthDate || null,
|
||||
ageFallback: birthDate ? null : ageFallback || null,
|
||||
gender,
|
||||
bio,
|
||||
visibility,
|
||||
};
|
||||
|
||||
console.log('Neues Haustier (Mock):', newPetPayload);
|
||||
console.log('NEW PET:', petPayload);
|
||||
|
||||
setSuccess('Haustier wurde technisch angelegt ✅');
|
||||
setName('');
|
||||
setType('');
|
||||
setBreed('');
|
||||
setBreedSearch('');
|
||||
setBio('');
|
||||
setSuccess('Haustier wurde erfolgreich angelegt.');
|
||||
setTimeout(() => {
|
||||
router.push('/pets');
|
||||
}, 800);
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
router.back();
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
style={{
|
||||
maxWidth: '600px',
|
||||
margin: '0 auto',
|
||||
display: 'grid',
|
||||
gap: '1.5rem',
|
||||
}}
|
||||
>
|
||||
<header>
|
||||
<h1 style={{ marginBottom: '0.5rem' }}>Haustier hinzufügen</h1>
|
||||
<p style={{ margin: 0, color: '#555' }}>
|
||||
Lege ein neues Haustier für dein Profil an.
|
||||
</p>
|
||||
<section className="pets-page">
|
||||
<header className="pets-header">
|
||||
<h1>Haustier hinzufügen</h1>
|
||||
<p>Lege ein neues Tier für dein Profil an.</p>
|
||||
</header>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
style={{
|
||||
border: '1px solid #e5e5e5',
|
||||
borderRadius: '16px',
|
||||
padding: '1rem',
|
||||
display: 'grid',
|
||||
gap: '1rem',
|
||||
backgroundColor: 'white',
|
||||
}}
|
||||
>
|
||||
<form className="pet-form" onSubmit={handleSubmit}>
|
||||
{/* Name */}
|
||||
<div style={{ display: 'grid', gap: '0.4rem' }}>
|
||||
<strong>Name</strong>
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Name <span className="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="z. B. Luna"
|
||||
style={{
|
||||
padding: '0.7rem',
|
||||
borderRadius: '10px',
|
||||
border: '1px solid #ccc',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Art */}
|
||||
<div style={{ display: 'grid', gap: '0.4rem' }}>
|
||||
<strong>Tier-Art</strong>
|
||||
{/* Tier-Art */}
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Tier-Art <span className="required">*</span>
|
||||
</label>
|
||||
<select
|
||||
value={type}
|
||||
onChange={(e) => {
|
||||
setType(e.target.value as PetType);
|
||||
setBreed('');
|
||||
setBreedSearch('');
|
||||
}}
|
||||
style={{
|
||||
padding: '0.6rem',
|
||||
borderRadius: '10px',
|
||||
border: '1px solid #ccc',
|
||||
maxWidth: '220px',
|
||||
}}
|
||||
>
|
||||
<option value="">Bitte auswählen</option>
|
||||
<option value="Katze">Katze</option>
|
||||
<option value="Hund">Hund</option>
|
||||
<option value="Katze">Katze</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Rasse */}
|
||||
{type && (
|
||||
<div style={{ display: 'grid', gap: '0.5rem' }}>
|
||||
<strong>Rasse</strong>
|
||||
|
||||
<input
|
||||
placeholder="Rasse suchen …"
|
||||
value={breedSearch}
|
||||
onChange={(e) => setBreedSearch(e.target.value)}
|
||||
style={{
|
||||
padding: '0.6rem',
|
||||
borderRadius: '10px',
|
||||
border: '1px solid #ccc',
|
||||
}}
|
||||
/>
|
||||
|
||||
<select
|
||||
value={breed}
|
||||
onChange={(e) => setBreed(e.target.value)}
|
||||
size={Math.min(filteredBreeds.length, 6)}
|
||||
style={{
|
||||
padding: '0.6rem',
|
||||
borderRadius: '10px',
|
||||
border: '1px solid #ccc',
|
||||
}}
|
||||
>
|
||||
{filteredBreeds.map((b) => (
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Rasse <span className="required">*</span>
|
||||
</label>
|
||||
<select value={breed} onChange={(e) => setBreed(e.target.value)}>
|
||||
<option value="">Bitte auswählen</option>
|
||||
{breeds.map((b) => (
|
||||
<option key={b} value={b}>
|
||||
{b}
|
||||
</option>
|
||||
@@ -164,51 +130,94 @@ export default function NewPetPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Geburtsdatum */}
|
||||
<div className="form-group">
|
||||
<label>Geburtsdatum (optional)</label>
|
||||
<input
|
||||
type="date"
|
||||
value={birthDate}
|
||||
onChange={(e) => {
|
||||
setBirthDate(e.target.value);
|
||||
if (e.target.value) setAgeFallback('');
|
||||
}}
|
||||
/>
|
||||
<small>
|
||||
Wenn bekannt – das Alter wird automatisch berechnet.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
{/* Fallback Alter */}
|
||||
{!birthDate && (
|
||||
<div className="form-group">
|
||||
<label>Alter (geschätzt)</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={30}
|
||||
value={ageFallback}
|
||||
onChange={(e) => setAgeFallback(e.target.value)}
|
||||
placeholder="z. B. 3"
|
||||
/>
|
||||
<small>Optional – eine grobe Angabe reicht.</small>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Geschlecht */}
|
||||
<div className="form-group">
|
||||
<label>Geschlecht</label>
|
||||
<select
|
||||
value={gender}
|
||||
onChange={(e) =>
|
||||
setGender(e.target.value as 'Männlich' | 'Weiblich' | 'Unbekannt')
|
||||
}
|
||||
>
|
||||
<option value="Unbekannt">Unbekannt</option>
|
||||
<option value="Männlich">Männlich</option>
|
||||
<option value="Weiblich">Weiblich</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Bio */}
|
||||
<div style={{ display: 'grid', gap: '0.4rem' }}>
|
||||
<strong>Kurzbeschreibung (optional)</strong>
|
||||
<div className="form-group">
|
||||
<label>Kurzbeschreibung</label>
|
||||
<textarea
|
||||
rows={3}
|
||||
value={bio}
|
||||
onChange={(e) => setBio(e.target.value)}
|
||||
placeholder="Alter, Charakter, Besonderheiten …"
|
||||
rows={3}
|
||||
style={{
|
||||
padding: '0.8rem',
|
||||
borderRadius: '12px',
|
||||
border: '1px solid #ccc',
|
||||
}}
|
||||
placeholder="Charakter, Besonderheiten, Alter …"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Sichtbarkeit */}
|
||||
<div className="form-group">
|
||||
<label>Sichtbarkeit</label>
|
||||
<select
|
||||
value={visibility}
|
||||
onChange={(e) =>
|
||||
setVisibility(e.target.value as 'public' | 'followers')
|
||||
}
|
||||
>
|
||||
<option value="public">Öffentlich</option>
|
||||
<option value="followers">Nur für Abonnenten</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Meldungen */}
|
||||
{error && (
|
||||
<div style={{ background: '#f8d7da', padding: '0.7rem' }}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{success && (
|
||||
<div style={{ background: '#d1e7dd', padding: '0.7rem' }}>
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
{error && <div className="form-error">{error}</div>}
|
||||
{success && <div className="form-success">{success}</div>}
|
||||
|
||||
{/* Aktionen */}
|
||||
<div style={{ display: 'flex', gap: '0.8rem' }}>
|
||||
<button
|
||||
type="submit"
|
||||
style={{
|
||||
padding: '0.8rem 1.2rem',
|
||||
borderRadius: '12px',
|
||||
border: 'none',
|
||||
backgroundColor: '#2E7D32',
|
||||
color: 'white',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="button-primary">
|
||||
Haustier speichern
|
||||
</button>
|
||||
|
||||
<Link href="/pets">Abbrechen</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="button-danger"
|
||||
onClick={handleCancel}
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
+51
-46
@@ -1,75 +1,80 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
type Pet = {
|
||||
id: number;
|
||||
name: string;
|
||||
type: 'Hund' | 'Katze';
|
||||
breed: string;
|
||||
age?: string;
|
||||
};
|
||||
|
||||
const mockPets: Pet[] = [
|
||||
{ id: 1, name: 'Luna', type: 'Katze' },
|
||||
{ id: 2, name: 'Bello', type: 'Hund' },
|
||||
{
|
||||
id: 1,
|
||||
name: 'Luna',
|
||||
type: 'Katze',
|
||||
breed: 'Bengal',
|
||||
age: '2 Jahre',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Bello',
|
||||
type: 'Hund',
|
||||
breed: 'Labrador',
|
||||
age: '4 Jahre',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Milo',
|
||||
type: 'Katze',
|
||||
breed: 'Europäisch Kurzhaar',
|
||||
},
|
||||
];
|
||||
|
||||
export default function PetsPage() {
|
||||
return (
|
||||
<section
|
||||
style={{
|
||||
maxWidth: '600px',
|
||||
margin: '0 auto',
|
||||
display: 'grid',
|
||||
gap: '1.5rem',
|
||||
}}
|
||||
>
|
||||
<header>
|
||||
<h1 style={{ marginBottom: '0.5rem' }}>Meine Haustiere</h1>
|
||||
<p style={{ margin: 0, color: '#555' }}>
|
||||
Verwalte deine Hunde und Katzen
|
||||
<section className="pets-page">
|
||||
{/* Header */}
|
||||
<header className="pets-header">
|
||||
<h1>Meine Tiere</h1>
|
||||
<p>
|
||||
Verwalte deine Haustiere – Beiträge sind immer einem Tier zugeordnet.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section style={{ display: 'grid', gap: '1rem' }}>
|
||||
{/* Pets Grid */}
|
||||
<div className="pets-grid">
|
||||
{mockPets.map((pet) => (
|
||||
<Link
|
||||
key={pet.id}
|
||||
href={`/pets/${pet.id}`}
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
color: 'inherit',
|
||||
border: '1px solid #e5e5e5',
|
||||
borderRadius: '16px',
|
||||
padding: '1rem',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
className="pet-card"
|
||||
>
|
||||
<div>
|
||||
<strong>{pet.name}</strong>
|
||||
<div style={{ fontSize: '0.9rem', color: '#555' }}>
|
||||
{pet.type}
|
||||
</div>
|
||||
<div className="pet-avatar">
|
||||
🐾
|
||||
</div>
|
||||
|
||||
<span style={{ fontSize: '1.2rem' }}>›</span>
|
||||
<strong className="pet-name">{pet.name}</strong>
|
||||
|
||||
<span className="pet-meta">
|
||||
{pet.type} · {pet.breed}
|
||||
</span>
|
||||
|
||||
{pet.age && (
|
||||
<span className="pet-age">{pet.age}</span>
|
||||
)}
|
||||
</Link>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/pets/new"
|
||||
style={{
|
||||
alignSelf: 'flex-start',
|
||||
padding: '0.7rem 1rem',
|
||||
borderRadius: '12px',
|
||||
backgroundColor: '#2E7D32',
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
➕ Haustier hinzufügen
|
||||
</Link>
|
||||
{/* Add Pet */}
|
||||
<div className="pets-actions">
|
||||
<Link href="/pets/new" className="button-primary">
|
||||
+ Neues Tier hinzufügen
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,157 @@
|
||||
'use client';
|
||||
|
||||
import PostCard, {
|
||||
PostCardData,
|
||||
} from '@/app/components/PostCard/PostCard';
|
||||
|
||||
/* =======================
|
||||
MOCK: USER
|
||||
======================= */
|
||||
|
||||
const user = {
|
||||
id: 1,
|
||||
name: 'Laura',
|
||||
username: '@laura_pets',
|
||||
bio: 'Liebt Tiere, Natur & ruhige Momente.',
|
||||
stats: {
|
||||
pets: 2,
|
||||
posts: 6,
|
||||
follows: 18,
|
||||
},
|
||||
};
|
||||
|
||||
/* =======================
|
||||
MOCK: PETS
|
||||
======================= */
|
||||
|
||||
const pets = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Nala',
|
||||
type: 'Katze',
|
||||
breed: 'Maine Coon',
|
||||
age: '3 Jahre',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Rocky',
|
||||
type: 'Hund',
|
||||
breed: 'Labrador',
|
||||
age: '4 Jahre',
|
||||
},
|
||||
];
|
||||
|
||||
/* =======================
|
||||
MOCK: POSTS
|
||||
======================= */
|
||||
|
||||
const posts: PostCardData[] = [
|
||||
{
|
||||
id: 501,
|
||||
petName: 'Nala',
|
||||
petType: 'Katze',
|
||||
authorName: 'Laura',
|
||||
createdAt: 'gestern',
|
||||
text: 'Nala beobachtet alles ganz ruhig.',
|
||||
likesCount: 6,
|
||||
commentsCount: 1,
|
||||
},
|
||||
{
|
||||
id: 502,
|
||||
petName: 'Rocky',
|
||||
petType: 'Hund',
|
||||
authorName: 'Laura',
|
||||
createdAt: 'vor 2 Tagen',
|
||||
text: 'Rocky liebt lange Spaziergänge.',
|
||||
likesCount: 9,
|
||||
commentsCount: 2,
|
||||
},
|
||||
];
|
||||
|
||||
/* =======================
|
||||
PAGE
|
||||
======================= */
|
||||
|
||||
export default function ProfilePage() {
|
||||
return <h1>Profil</h1>;
|
||||
return (
|
||||
<>
|
||||
{/* ================= USER HEADER ================= */}
|
||||
<section className="profile-header">
|
||||
<div className="profile-avatar">
|
||||
<span>👤</span>
|
||||
</div>
|
||||
|
||||
<div className="profile-info">
|
||||
<h1>{user.name}</h1>
|
||||
<span className="profile-username">
|
||||
{user.username}
|
||||
</span>
|
||||
|
||||
{user.bio && (
|
||||
<p className="profile-bio">
|
||||
{user.bio}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="profile-stats">
|
||||
<div>
|
||||
<strong>{user.stats.pets}</strong>
|
||||
<span>Tiere</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{user.stats.posts}</strong>
|
||||
<span>Beiträge</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{user.stats.follows}</strong>
|
||||
<span>Abos</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ================= PETS ================= */}
|
||||
<section className="profile-pets">
|
||||
<h2>Meine Tiere</h2>
|
||||
|
||||
<div className="pets-grid">
|
||||
{pets.map((pet) => (
|
||||
<a
|
||||
key={pet.id}
|
||||
href={`/pets/${pet.id}`}
|
||||
className="pet-card"
|
||||
>
|
||||
<div className="pet-avatar">🐾</div>
|
||||
|
||||
<strong className="pet-name">
|
||||
{pet.name}
|
||||
</strong>
|
||||
|
||||
<span className="pet-meta">
|
||||
{pet.type} · {pet.breed}
|
||||
</span>
|
||||
|
||||
<span className="pet-age">
|
||||
{pet.age}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ================= POSTS ================= */}
|
||||
<section className="profile-posts">
|
||||
<h2>Beiträge</h2>
|
||||
|
||||
<div className="post-list">
|
||||
{posts.map((post) => (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
post={post}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user