AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 20:13:49 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Update: more work on beer styles, add erd to readme

Browse Source
This commit is contained in:
Aaron William Po
2023-09-22 22:52:51 -04:00
parent 43220fe0e6
commit a604a24fd1
7 changed files with 2152 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/BeerStyle/BeerStyleCard.tsx
View File

@@ -8,24 +8,37 @@ const BeerStyleCard: FC<{ beerStyle: z.infer<typeof BeerStyleQueryResult> }> = (
beerStyle,
}) => {
return (
<div className="card card-compact bg-base-300" key={beerStyle.id}>
<div className="card card-compact bg-base-300">
<div className="card-body justify-between">
<div className="space-y-1">
<Link href={`/beers/types/${beerStyle.id}`}>
<h3 className="link-hover link overflow-hidden whitespace-normal text-2xl font-bold lg:truncate lg:text-3xl">
{beerStyle.name}
</h3>
<div className="text-base-content text-sm">
ABV Range: <span>{beerStyle.abvRange[0].toFixed(1)}%</span>
<span> - </span>
<span>{beerStyle.abvRange[1].toFixed(1)}%</span>
</div>
<div className="text-base-content text-sm">
IBU Range: <span>{beerStyle.ibuRange[0].toFixed(1)}</span>
<span> - </span>
<span>{beerStyle.ibuRange[1].toFixed(1)}</span>
</div>
</Link>
<div className="flex w-25 space-x-3 flex-row">
<div className="text-sm font-bold">
ABV Range:{' '}
<span>
{beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[1].toFixed(1)}%
</span>
</div>
<div className="text-sm font-bold">
IBU Range:{' '}
<span>
{beerStyle.ibuRange[0].toFixed(1)} - {beerStyle.ibuRange[1].toFixed(1)}
</span>
</div>
</div>
<div>
<p>{beerStyle.description}</p>
</div>
<div className="font-semibold">
Recommended Glassware:{' '}
<span className="text-sm font-bold italic">{beerStyle.glassware.name}</span>
</div>
</div>
</div>
</div>

23
src/components/ui/SmLoadingCard.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { FC } from 'react';
const SMLoadingCard: FC = () => {
return (
<div className="card bg-base-300">
<div className="card-body h-52">
<div className="flex animate-pulse space-x-4">
<div className="flex-1 space-y-4 py-1">
<div className="h-4 w-3/4 rounded bg-base-100" />
<div className="space-y-2">
<div className="h-4 rounded bg-base-100" />
<div className="h-4 w-5/6 rounded bg-base-100" />
<div className="h-4 w-5/6 rounded bg-base-100" />
<div className="h-4 rounded bg-base-100" />
</div>
</div>
</div>
</div>
</div>
);
};
export default SMLoadingCard;