Skip to content

Endret design på recipeDetail og lagt til favorittknapp (#133) #135

Merged
merged 1 commit into from
Oct 16, 2026
+39 −28
Merged

Endret design på recipeDetail og lagt til favorittknapp (#133) #135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 29 additions & 23 deletions client/src/components/recipe/RecipeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Rating } from '@mui/material';
import { RecipeImage } from '../ui/RecipeImage';
import RestaurantIcon from '@mui/icons-material/Restaurant';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import { FavoriteButton } from '../favorites/FavoriteButton';

// Sier hva komponenten får inn.
type RecipeCardProps = {
Expand All @@ -12,30 +13,35 @@ type RecipeCardProps = {

export function RecipeCard({ recipe }: RecipeCardProps) {
return (
<Link to={`/recipes/${recipe.id}`} className="block h-full rounded-lg focus-visible:outline-2 focus-visible:outline-primary">
<article className="border border-peach rounded-lg overflow-hidden text-black h-full bg-white/50 transition hover:shadow-lg hover:border-primary group flex flex-col">
<RecipeImage imageUrl={recipe.imageUrl} alt={recipe.title} className="w-full aspect-square" />
<div className="p-4">
<h3 className="text-lg font-semibold group-hover:underline min-h-8">{recipe.title}</h3>
<div className="flex gap-3">
<p className="flex items-center text-sm gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} min</p>
<p className="text-3xl">·</p>
<p className="flex items-center text-sm gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
<div className="relative">
<Link to={`/recipes/${recipe.id}`} className="block h-full rounded-lg focus-visible:outline-2 focus-visible:outline-primary">
<article className="border border-peach rounded-lg overflow-hidden text-black h-full bg-white/50 transition hover:shadow-lg hover:border-primary group flex flex-col">
<RecipeImage imageUrl={recipe.imageUrl} alt={recipe.title} className="w-full aspect-square" />
<div className="p-4">
<h3 className="text-lg font-semibold group-hover:underline min-h-8">{recipe.title}</h3>
<div className="flex gap-3">
<p className="flex items-center text-sm gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} min</p>
<p className="text-3xl">·</p>
<p className="flex items-center text-sm gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
</div>
<div className="mt-auto">
{recipe.averageRating !== null ?(
<Rating
value={recipe.averageRating}
readOnly
precision={0.5}
size="small"
/>
) : ( <p>Ingen rating ennå</p>
)}
</div>
</div>
<div className="mt-auto">
{recipe.averageRating !== null ?(
<Rating
value={recipe.averageRating}
readOnly
precision={0.5}
size="small"
/>
) : ( <p>Ingen rating ennå</p>
)}
</div>
</div>
</article>
</Link>
</article>
</Link>
<div className="absolute right-3 top-3">
<FavoriteButton recipeId={recipe.id} title={recipe.title} />
</div>
</div>
);
}

15 changes: 10 additions & 5 deletions client/src/components/recipe/RecipeDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import AddIcon from '@mui/icons-material/Add';
import RemoveIcon from '@mui/icons-material/Remove';
import { FavoriteButton } from '../favorites/FavoriteButton';

// Sier hva komponenten får inn.
type RecipeDetailProps = {
Expand All @@ -34,7 +35,7 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {

return (
<article className="grid md:grid-cols-2 gap-6">
<section className="border border-olive rounded-lg p-4 flex flex-col bg-background">
<section className="border border-peach rounded-lg p-4 flex flex-col bg-background">
<div className="flex flex-wrap items-center justify-between gap-2 mb-4">
<ul className="flex flex-wrap gap-2">
{recipe.tags.map((tag) => (
Expand All @@ -60,15 +61,19 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
<div>
<p>{recipe.description}</p>
</div>
<div className="flex justify-between">
<div className="flex gap-3">
<p className="rounded-full flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} minutter</p>
<p className="text-3xl">·</p>
<p className="rounded-full flex items-center gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
</div>
</section>
<section className="rounded-lg">
<section className="relative rounded-lg">
<RecipeImage imageUrl={recipe.imageUrl} alt={recipe.title} className="w-full h-72 rounded-lg" />
<div className="absolute top-3 right-3">
<FavoriteButton recipeId={recipe.id} title={recipe.title} />
</div>
</section>
<section className="border border-olive rounded-lg p-4 bg-background">
<section className="border border-peach rounded-lg p-4 bg-background">
<Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
<h2 className="text-2xl font-semibold">Ingredienser</h2>
<Stack direction="row" sx={{ alignItems: 'center', border: 1, borderColor: 'var(--color-pink-light)', borderRadius: 3, p: 0.5}}>
Expand Down Expand Up @@ -126,7 +131,7 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
))}
</ul>
</section>
<section className="border border-olive bg-background rounded-lg p-4">
<section className="border border-peach bg-background rounded-lg p-4">
<h2 className="text-2xl font-semibold">Fremgangsmåte</h2>
<ol className="flex flex-col gap-3">
{recipe.steps.map((step) => (
Expand Down