AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-10-15 01:54:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace hand-rolled card, placeholder, and marker styling in the brewery UI with daisyUI card, skeleton, and theme-color classes

Browse Source
This commit is contained in:
Aaron Po
2026-08-28 01:18:49 -04:00
parent 9f39a305d5
commit 9d74f17fc9
5 changed files with 56 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
web/frontend/app/features/breweries/components/RecentBreweries.tsx
View File

@@ -13,25 +13,27 @@ const RecentBreweries = ({ breweries }: RecentBreweriesProps) => {
<h2 className="font-serif text-2xl mb-3.5">Recently added</h2>
<div className="grid gap-5 grid-cols-[repeat(auto-fit,minmax(15rem,1fr))]">
{breweries.map((brewery) => (
<div
key={brewery.breweryPostId}
className="card bg-base-100 shadow p-6 flex flex-col gap-1.5"
>
<h3 className="font-serif text-xl m-0">{brewery.breweryName}</h3>
{brewery.location && (
<div className="text-sm text-base-content/60">
{brewery.location.cityName}, {brewery.location.stateProvinceCode}
</div>
)}
<p className="text-sm leading-snug mt-1 line-clamp-2">
{brewery.description}
</p>
<Link
to={`/breweries/${brewery.breweryPostId}`}
className="link link-hover text-sm font-semibold text-secondary hover:text-primary mt-2"
>
View brewery &rarr;
</Link>
<div key={brewery.breweryPostId} className="card bg-base-100 shadow">
<div className="card-body gap-1.5">
<h3 className="card-title font-serif text-xl">
{brewery.breweryName}
</h3>
{brewery.location && (
<div className="text-sm text-base-content/60">
{brewery.location.cityName},{' '}
{brewery.location.stateProvinceCode}
</div>
)}
<p className="text-sm leading-snug mt-1 line-clamp-2">
{brewery.description}
</p>
<Link
to={`/breweries/${brewery.breweryPostId}`}
className="link link-hover text-sm font-semibold text-secondary hover:text-primary mt-2"
>
View brewery &rarr;
</Link>
</div>
</div>
))}
</div>