Refactor beer comment section and incorporate image carousel

Beer comment section now uses a ternary expression for isLoading. Image carousel implemented in beer by id page.
This commit is contained in:
Aaron William Po
2023-04-11 20:23:55 -04:00
parent 6c8a510d80
commit ea3e8a0023
7 changed files with 563 additions and 82 deletions

View File

@@ -7,17 +7,22 @@ interface SpinnerProps {
const Spinner: FC<SpinnerProps> = ({ size = 'md' }) => {
const spinnerWidths: Record<NonNullable<SpinnerProps['size']>, `w-[${number}px]`> = {
xs: 'w-[45px]',
sm: 'w-[60px]',
md: 'w-[100px]',
lg: 'w-[150px]',
xl: 'w-[200px]',
sm: 'w-[90px]',
md: 'w-[135px]',
lg: 'w-[180px]',
xl: 'w-[225px]',
};
return (
<div role="status" className="flex flex-col items-center justify-center rounded-3xl">
<div
role="alert"
aria-busy="true"
aria-live="polite"
className="flex flex-col items-center justify-center rounded-3xl text-primary"
>
<svg
aria-hidden="true"
className={`${spinnerWidths[size]} animate-spin fill-secondary text-primary`}
className={`${spinnerWidths[size]} animate-spin fill-base-content`}
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"