Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 admin
|
ab88d6e1bc | ||
|
admin
|
6ebbd5d457 | ||
|
admin
|
c7a09c6a1f |
@@ -0,0 +1,179 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
const leftItems = [
|
||||
{ href: '/feed', label: 'Feed', icon: '🏠' },
|
||||
{ href: '/explore', label: 'Entdecken', icon: '🔍' },
|
||||
];
|
||||
|
||||
const rightItems = [
|
||||
{ href: '/pets', label: 'Tiere', icon: '🐾' },
|
||||
{ href: '/profile', label: 'Profil', icon: '👤' },
|
||||
];
|
||||
|
||||
function NavItem({
|
||||
item,
|
||||
pathname,
|
||||
}: {
|
||||
item: { href: string; label: string; icon: string };
|
||||
pathname: string;
|
||||
}) {
|
||||
const isActive =
|
||||
item.href === '/feed'
|
||||
? pathname === '/feed'
|
||||
: pathname.startsWith(item.href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={item.href}
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
color: isActive ? '#000' : '#777',
|
||||
fontSize: '0.7rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '2px',
|
||||
transition: 'transform 0.15s ease, color 0.15s ease',
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'scale(0.9)';
|
||||
}}
|
||||
onMouseUp={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'scale(1)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'scale(1)';
|
||||
}}
|
||||
|
||||
>
|
||||
<span style={{ fontSize: '1.1rem' }}>{item.icon}</span>
|
||||
{item.label}
|
||||
{isActive && (
|
||||
<span
|
||||
style={{
|
||||
marginTop: '2px',
|
||||
width: '6px',
|
||||
height: '2px',
|
||||
borderRadius: '2px',
|
||||
backgroundColor: '#2E7D32',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BottomNav() {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
const hasAuthCookie = document.cookie
|
||||
.split('; ')
|
||||
.some((c) => c.startsWith('onlypets-auth=true'));
|
||||
|
||||
setIsLoggedIn(hasAuthCookie);
|
||||
}, []);
|
||||
|
||||
if (!isLoggedIn) return null;
|
||||
|
||||
return (
|
||||
<nav
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: '70px',
|
||||
borderTop: '1px solid #eee',
|
||||
backgroundColor: '#fff',
|
||||
zIndex: 100,
|
||||
}}
|
||||
>
|
||||
{/* Linke Seite */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
height: '70px',
|
||||
width: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-evenly',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{leftItems.map((item) => (
|
||||
<NavItem key={item.href} item={item} pathname={pathname} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Rechte Seite */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
height: '70px',
|
||||
width: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-evenly',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{rightItems.map((item) => (
|
||||
<NavItem key={item.href} item={item} pathname={pathname} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Zentrierter Post-Button */}
|
||||
<Link
|
||||
href="/post/new"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%) translateY(-18px)',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '56px',
|
||||
height: '56px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#2E7D32',
|
||||
color: 'white',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '1.3rem',
|
||||
boxShadow: '0 6px 16px rgba(0,0,0,0.25)',
|
||||
transition: 'transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
transform: 'translateY(0) scale(1)', // 🔑 Ausgangszustand
|
||||
}}
|
||||
onClick={(e) => {
|
||||
const el = e.currentTarget as HTMLElement;
|
||||
|
||||
// Jump
|
||||
el.style.transform = 'translateY(-8px) scale(0.95)';
|
||||
|
||||
// Rückkehr
|
||||
setTimeout(() => {
|
||||
el.style.transform = 'translateY(0) scale(1)';
|
||||
}, 180);
|
||||
}}
|
||||
>
|
||||
➕
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default function Navbar() {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const hasAuthCookie = document.cookie
|
||||
.split('; ')
|
||||
.some((c) => c.startsWith('onlypets-auth=true'));
|
||||
|
||||
setIsLoggedIn(hasAuthCookie);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<nav
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '1.5rem',
|
||||
padding: '1rem',
|
||||
borderBottom: '1px solid #eee',
|
||||
}}
|
||||
>
|
||||
{/* 🌱 GAST-NAVIGATION */}
|
||||
{!isLoggedIn && (
|
||||
<>
|
||||
<Link href="/">Home</Link>
|
||||
<Link href="/login">Login</Link>
|
||||
<Link href="/register">Registrierung</Link>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 🐾 USER-NAVIGATION */}
|
||||
{isLoggedIn && (
|
||||
<>
|
||||
<Link href="/feed">Feed</Link>
|
||||
<Link href="/explore">Entdecken</Link>
|
||||
<Link href="/pets">Meine Tiere</Link>
|
||||
<Link href="/post/new">Posten</Link>
|
||||
<Link href="/profile">Profil</Link>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,226 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState } from 'react';
|
||||
import PostCard, {
|
||||
PostCardData,
|
||||
} from '@/app/components/PostCard/PostCard';
|
||||
|
||||
/* =======================
|
||||
MOCK DATA
|
||||
======================= */
|
||||
|
||||
const trendingPets = [
|
||||
{ id: 1, name: 'Luna', type: 'Katze' },
|
||||
{ id: 2, name: 'Bello', type: 'Hund' },
|
||||
{ id: 3, name: 'Milo', type: 'Katze' },
|
||||
{ id: 4, name: 'Rocky', type: 'Hund' },
|
||||
{ id: 5, name: 'Nala', type: 'Katze' },
|
||||
{ id: 6, name: 'Leo', type: 'Hund' },
|
||||
];
|
||||
|
||||
const latestPosts: PostCardData[] = [
|
||||
{
|
||||
id: 101,
|
||||
petName: 'Luna',
|
||||
petType: 'Katze',
|
||||
authorName: 'Anna',
|
||||
createdAt: 'vor 2 Stunden',
|
||||
text: 'Luna chillt auf dem Sofa und beobachtet alles ganz genau.',
|
||||
likesCount: 12,
|
||||
commentsCount: 3,
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
petName: 'Bello',
|
||||
petType: 'Hund',
|
||||
authorName: 'Markus',
|
||||
createdAt: 'heute',
|
||||
text: 'Bello hat sein neues Lieblingsspielzeug gefunden.',
|
||||
likesCount: 25,
|
||||
commentsCount: 8,
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
petName: 'Milo',
|
||||
petType: 'Katze',
|
||||
authorName: 'Sophie',
|
||||
createdAt: 'gestern',
|
||||
text: 'Milo hat wieder einen Karton erobert.',
|
||||
likesCount: 7,
|
||||
commentsCount: 1,
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
petName: 'Rocky',
|
||||
petType: 'Hund',
|
||||
authorName: 'Timo',
|
||||
createdAt: 'gestern',
|
||||
text: 'Rocky war im Wald unterwegs. 10/10 würde wieder rennen.',
|
||||
likesCount: 19,
|
||||
commentsCount: 4,
|
||||
},
|
||||
];
|
||||
|
||||
/* =======================
|
||||
PAGE
|
||||
======================= */
|
||||
|
||||
export default function ExplorePage() {
|
||||
return <h1>Entdecken</h1>;
|
||||
const [activeFilter, setActiveFilter] =
|
||||
useState<'ALLE' | 'HUND' | 'KATZE'>('ALLE');
|
||||
|
||||
const [previewPost, setPreviewPost] =
|
||||
useState<PostCardData | null>(null);
|
||||
|
||||
const [openComments, setOpenComments] = useState(false);
|
||||
|
||||
// Swipe-Down fürs Modal
|
||||
const startY = useRef<number | null>(null);
|
||||
|
||||
const filteredPosts = latestPosts.filter((p) => {
|
||||
if (activeFilter === 'HUND') return p.petType === 'Hund';
|
||||
if (activeFilter === 'KATZE') return p.petType === 'Katze';
|
||||
return true;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ================= HEADER / FILTER ================= */}
|
||||
<section className="explore-header">
|
||||
<header>
|
||||
<h1>Entdecken</h1>
|
||||
<p>Neue Tiere, Trends & besondere Momente</p>
|
||||
</header>
|
||||
|
||||
<div className="explore-filter">
|
||||
{[
|
||||
{ key: 'ALLE', label: 'Alle' },
|
||||
{ key: 'HUND', label: 'Hunde' },
|
||||
{ key: 'KATZE', label: 'Katzen' },
|
||||
].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 className="explore-trending">
|
||||
<strong>Beliebte Tiere</strong>
|
||||
|
||||
<div className="trending-scroll hide-scrollbar">
|
||||
{trendingPets.map((pet) => (
|
||||
<div key={pet.id} className="trending-item">
|
||||
<div className="trending-avatar">🐾</div>
|
||||
<div className="trending-meta">
|
||||
<strong>{pet.name}</strong>
|
||||
<span>{pet.type}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ================= POSTS ================= */}
|
||||
<section className="explore-posts">
|
||||
<strong>Neueste Beiträge</strong>
|
||||
|
||||
<div className="post-list">
|
||||
{filteredPosts.map((post) => (
|
||||
<PostCard
|
||||
key={post.id}
|
||||
post={post}
|
||||
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 className="modal-actions">
|
||||
<a
|
||||
href={`/post/${previewPost.id}`}
|
||||
className="modal-open-post"
|
||||
>
|
||||
Zum Beitrag
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
+605
-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);
|
||||
@@ -46,4 +74,567 @@ body {
|
||||
.navbar a.active {
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
/* Hide horizontal scrollbar but keep scroll */
|
||||
.hide-scrollbar {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE / Edge */
|
||||
}
|
||||
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none; /* Chrome / Safari */
|
||||
}
|
||||
@keyframes skeleton {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: 0 0; }
|
||||
}
|
||||
@keyframes heart-pop {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes comment-wiggle {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.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: var(--radius-lg);
|
||||
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: var(--radius-lg);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-main);
|
||||
border: 1px solid var(--color-border);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-danger {
|
||||
background: #c62828;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.button-danger:hover {
|
||||
background: #b71c1c;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
+10
-6
@@ -1,5 +1,7 @@
|
||||
import './globals.css';
|
||||
import Navigation from './components/Navigation';
|
||||
/*import Navigation from './components/Navigation';*/
|
||||
import BottomNav from './components/BottomNav/BottomNav';
|
||||
|
||||
|
||||
export const metadata = {
|
||||
title: 'OnlyPets',
|
||||
@@ -14,11 +16,13 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="de">
|
||||
<body>
|
||||
<Navigation />
|
||||
<main style={{ padding: '2rem' }}>
|
||||
{children}
|
||||
</main>
|
||||
</body>
|
||||
<div style={{ paddingBottom: '80px' }}>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<BottomNav />
|
||||
</body>
|
||||
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
'use client';
|
||||
|
||||
import { useParams } from 'next/navigation';
|
||||
import PostCard from '@/app/components/PostCard/PostCard';
|
||||
|
||||
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 +29,103 @@ 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.age && ` · ${pet.age}`}
|
||||
</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>
|
||||
);
|
||||
|
||||
+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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import type { NextRequest } from 'next/server';
|
||||
|
||||
export function middleware(request: NextRequest) {
|
||||
const { pathname } = request.nextUrl;
|
||||
|
||||
// 🔐 Simulierter Login-Check
|
||||
// später: Cookie / Session / JWT
|
||||
const isLoggedIn = request.cookies.get('onlypets-auth')?.value === 'true';
|
||||
|
||||
// 🚪 Gast auf Startseite lassen
|
||||
if (!isLoggedIn && pathname === '/') {
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
// 🏠 Eingeloggt? Startseite überspringen → Feed
|
||||
if (isLoggedIn && pathname === '/') {
|
||||
return NextResponse.redirect(new URL('/feed', request.url));
|
||||
}
|
||||
|
||||
// 🔒 Geschützte Seiten
|
||||
const protectedRoutes = [
|
||||
'/feed',
|
||||
'/post',
|
||||
'/pets',
|
||||
'/explore', // 🔍 Entdecken / Neue Beiträge
|
||||
'/profile', // 👤 Eigenes Profil
|
||||
'/user', // 👥 fremde Profile (z. B. /user/123)
|
||||
];
|
||||
|
||||
|
||||
if (!isLoggedIn && protectedRoutes.some((route) => pathname.startsWith(route))) {
|
||||
return NextResponse.redirect(new URL('/login', request.url));
|
||||
}
|
||||
|
||||
// 🔄 Login-Seite für eingeloggte User blocken
|
||||
if (isLoggedIn && pathname === '/login') {
|
||||
return NextResponse.redirect(new URL('/feed', request.url));
|
||||
}
|
||||
|
||||
return NextResponse.next();
|
||||
}
|
||||
Reference in New Issue
Block a user