araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

Fix component layout

Browse source
This commit is contained in:
araemer 2025-10-25 08:16:00 +02:00
parent c866c01dfe
commit 7c01ed5894
2 changed files with 38 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/App.css
View file

@ -4,8 +4,9 @@
@tailwind utilities;
/* Custom recipe app styles */
@layer preflight {
/* headlines */
@layer components {
h1 {
@apply text-3xl font-black text-blue-900;
}
@ -18,18 +19,15 @@
@apply font-semibold;
}
/* labels */
label {
@apply text-gray-600;
}
/* input fields */
input, textarea {
@apply p-2 w-full border rounded-md bg-white placeholder-gray-400 border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900;
}
}
@layer components {
/* labels */
label {
@apply text-gray-600;
}
/* background */
.app-bg {

61
frontend/src/components/recipes/RecipeListItem.tsx
View file

@ -1,40 +1,41 @@
import { Link } from "react-router-dom"
import {Link} from "react-router-dom"
type RecipeListItemProps = {
title: string
targetPath: string
imageUrl?: string
title: string
targetPath: string
imageUrl?: string
}
/**
* List item for the recipe list. Selecting an item navigates to the recipe
*/
export default function RecipeListItem({ title, targetPath, imageUrl }: RecipeListItemProps) {
return (
<Link
to={targetPath}
className="h-60 w-60 block rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow bg-white dark:bg-gray-800"
>
{/* Optional recipe image */}
{imageUrl ? (
<img
src={imageUrl}
alt={title}
className="w-full h-40 object-cover"
/>
)
: <div className="bg-gray-300 w-full h-40 flex justify-center items-center">
<label className="font-black text-gray-500" >no image</label>
</div>
}
export default function RecipeListItem({title, targetPath, imageUrl}: RecipeListItemProps) {
return (
<Link
to={targetPath}
className="h-60 w-60 block rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow bg-white dark:bg-gray-800 flex flex-col"
>
{/* Image or placeholder */}
{imageUrl ? (
<img
src={imageUrl}
alt={title}
className="w-full h-2/3 object-cover"
/>
) : (
<div className="bg-gray-300 w-full h-2/3 flex justify-center items-center">
<label className="font-black text-gray-600">no image</label>
</div>
)}
{/* Card content */}
<div className="p-4">
<h2 className="text-lg font-semibold text-blue-400 dark:text-gray-100">
{title}
</h2>
</div>
</Link>
)
{/* Recipe name section (takes remaining space) */}
<div className="flex-1 flex items-center justify-center p-2">
<label className="text-lg font-semibold text-blue-400 dark:text-gray-100 text-center">
{title}
</label>
</div>
</Link>
);
}