Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 admin
|
13f2dedf13 | ||
|
admin
|
34ace67d1f | ||
|
admin
|
ab88d6e1bc |
+472
-31
@@ -45,12 +45,7 @@ html, body {
|
||||
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
@@ -129,22 +124,12 @@ body {
|
||||
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;
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.postcard:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.postcard {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
@@ -187,7 +172,7 @@ body {
|
||||
.postcard--discovery {
|
||||
border: 1px solid var(--color-primary);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(46, 125, 50, 0.15),
|
||||
0 0 0 1px rgba(236, 214, 15, 0.925),
|
||||
var(--shadow-sm);
|
||||
}
|
||||
.feed-header,
|
||||
@@ -195,16 +180,16 @@ body {
|
||||
padding: var(--space-lg) var(--space-md) var(--space-md);
|
||||
}
|
||||
|
||||
.feed-header p,
|
||||
/*.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: 0 var(--space-md) var(--space-xl);
|
||||
padding-bottom: calc(var(--space-xl) + 60px);
|
||||
}
|
||||
.fresh-scroll,
|
||||
.trending-scroll {
|
||||
@@ -214,9 +199,7 @@ body {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
}
|
||||
|
||||
.hide-scrollbar {
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
@@ -238,16 +221,43 @@ body {
|
||||
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);
|
||||
margin: var(--space-md);
|
||||
}
|
||||
.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-sm);
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
.profile-stats div {
|
||||
@@ -255,13 +265,51 @@ body {
|
||||
}
|
||||
|
||||
.profile-stats strong {
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.profile-stats span {
|
||||
font-size: 0.8rem;
|
||||
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;
|
||||
@@ -270,13 +318,406 @@ body {
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user