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

Dev: add placeholder avatar, change image urls

Browse Source
This commit is contained in:
Aaron William Po
2023-11-27 11:50:42 -05:00
parent de9b3e300f
commit e27a24bdb9
9 changed files with 47 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.gitignore vendored
View File

@@ -37,12 +37,11 @@ yarn-error.log*
*.tsbuildinfo *.tsbuildinfo
next-env.d.ts next-env.d.ts
# http requests # HTTP playground
*.http *.http
# uploaded images
public/uploads
# vscode # vscode
.vscode .vscode
/cloudinary-images

15
src/components/Account/UserAvatar.tsx
View File

@@ -2,6 +2,7 @@ import { FC } from 'react';
import Image from 'next/image'; import Image from 'next/image';
import { z } from 'zod'; import { z } from 'zod';
import GetUserSchema from '@/services/User/schema/GetUserSchema'; import GetUserSchema from '@/services/User/schema/GetUserSchema';
import { FaUser } from 'react-icons/fa';
interface UserAvatarProps { interface UserAvatarProps {
user: { user: {
@@ -13,13 +14,23 @@ interface UserAvatarProps {
const UserAvatar: FC<UserAvatarProps> = ({ user }) => { const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
const { userAvatar } = user; const { userAvatar } = user;
return !userAvatar ? null : ( return !userAvatar ? (
<div
className="h-32 w-full bg-primary mask mask-circle flex items-center justify-center"
aria-label="Default user avatar"
role="img"
>
<span className="text-2xl font-bold text-base-content h-full">
<FaUser className="h-full" />
</span>
</div>
) : (
<Image <Image
src={userAvatar.path} src={userAvatar.path}
alt="user avatar" alt="user avatar"
width={1000} width={1000}
height={1000} height={1000}
className="h-full w-full object-cover mask mask-circle ring ring-primary ring-offset-base-100 ring-offset-2" className="h-full w-full object-cover mask mask-circle"
/> />
); );
}; };

2
src/components/BeerBreweryComments/CommentCardBody.tsx
View File

@@ -31,7 +31,7 @@ const CommentCardBody: FC<CommentCardProps> = ({
return ( return (
<div ref={ref} className="flex"> <div ref={ref} className="flex">
<div className="w-[12%] py-4 justify-center"> <div className="w-[12%] py-4 justify-center">
<div className="px-1"> <div className="px-3 h-20">
<UserAvatar user={comment.postedBy} /> <UserAvatar user={comment.postedBy} />
</div> </div>
</div> </div>

2
src/pages/404.tsx
View File

@@ -1,5 +1,3 @@
// create a 404 next js page using tailwind
import { NextPage } from 'next'; import { NextPage } from 'next';
import Head from 'next/head'; import Head from 'next/head';

2
src/pages/account/index.tsx
View File

@@ -35,7 +35,7 @@ const AccountPage: NextPage = () => {
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="m-12 flex w-11/12 flex-col items-center justify-center space-y-3 lg:w-8/12"> <div className="m-12 flex w-11/12 flex-col items-center justify-center space-y-3 lg:w-8/12">
<div className="flex flex-col items-center space-y-3"> <div className="flex flex-col items-center space-y-3">
<div className="h-32"> <div className="h-20 mb-10 w-20">
<UserAvatar user={user} /> <UserAvatar user={user} />
</div> </div>

31
src/pages/breweries/index.tsx
View File

@@ -8,7 +8,7 @@ import { NextPage } from 'next';
import Head from 'next/head'; import Head from 'next/head';
import { useContext, MutableRefObject, useRef } from 'react'; import { useContext, MutableRefObject, useRef } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { FaPlus, FaArrowUp } from 'react-icons/fa'; import { FaPlus, FaArrowUp, FaMap } from 'react-icons/fa';
import { useInView } from 'react-intersection-observer'; import { useInView } from 'react-intersection-observer';
import { z } from 'zod'; import { z } from 'zod';
@@ -51,25 +51,24 @@ const BreweryPage: NextPage<BreweryPageProps> = () => {
<h1 className="text-4xl font-bold lg:text-6xl">The Biergarten App</h1> <h1 className="text-4xl font-bold lg:text-6xl">The Biergarten App</h1>
<h2 className="text-2xl font-bold lg:text-4xl">Breweries</h2> <h2 className="text-2xl font-bold lg:text-4xl">Breweries</h2>
</div> </div>
<div> </div>
<Link <div className="flex flex-col">
className="link-hover link text-xl font-bold lg:text-2xl" {!!user && (
href="/breweries/map" <div
className="tooltip tooltip-left"
data-tip="Create a new brewery post"
> >
View map <Link href="/breweries/create" className="btn-ghost btn-sm btn">
<FaPlus className="text-lg" />
</Link>
</div>
)}
<div className="tooltip tooltip-left" data-tip="View map">
<Link className="btn-ghost btn-sm btn" href="/breweries/map">
<FaMap className="text-lg" />
</Link> </Link>
</div> </div>
</div> </div>
{!!user && (
<div
className="tooltip tooltip-left h-full"
data-tip="Create a new brewery post"
>
<Link href="/breweries/create" className="btn-ghost btn-sm btn">
<FaPlus />
</Link>
</div>
)}
</header> </header>
<div className="grid gap-6 xl:grid-cols-2"> <div className="grid gap-6 xl:grid-cols-2">
{!!breweryPosts.length && !isLoading && ( {!!breweryPosts.length && !isLoading && (

2
src/pages/breweries/map.tsx
View File

@@ -34,7 +34,7 @@ const BreweryMapPage: NextPage<BreweryMapPageProps> = ({ token }) => {
const mapStyles: MapStyles = { const mapStyles: MapStyles = {
light: 'mapbox://styles/mapbox/light-v10', light: 'mapbox://styles/mapbox/light-v10',
dark: 'mapbox://styles/mapbox/dark-v11', dark: 'mapbox://styles/mapbox/dark-v10',
}; };
const pins = useMemo( const pins = useMemo(

14
src/prisma/seed/util/imageUrls.ts
View File

@@ -1,9 +1,13 @@
const imageUrls = [ const imageUrls = [
'https://res.cloudinary.com/dxie9b7na/image/upload/v1683482214/cld-sample.jpg', 'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056802/cloudinary-images/pexels-brett-sayles-1551944_era4te.jpg',
'https://res.cloudinary.com/dxie9b7na/image/upload/v1683482214/cld-sample-2.jpg', 'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056801/cloudinary-images/pexels-ketut-subiyanto-5055809_fwkfoj.jpg',
'https://res.cloudinary.com/dxie9b7na/image/upload/v1683482214/cld-sample-3.jpg', 'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056801/cloudinary-images/pexels-cottonbro-studio-5537954_zsxs7n.jpg',
'https://res.cloudinary.com/dxie9b7na/image/upload/v1683482214/cld-sample-4.jpg', 'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056800/cloudinary-images/pexels-tembela-bohle-1089931_f7jcer.jpg',
'https://res.cloudinary.com/dxie9b7na/image/upload/v1683482214/cld-sample-5.jpg', 'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056798/cloudinary-images/pexels-tembela-bohle-1089930_yzfjlv.jpg',
'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056797/cloudinary-images/pexels-cottonbro-studio-5529918_e0jlle.jpg',
'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056797/cloudinary-images/pexels-casalfilmsestudio-2076748_xymlox.jpg',
'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056795/cloudinary-images/pexels-elevate-3009770_simouh.jpg',
'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg',
] as const; ] as const;
export default imageUrls; export default imageUrls;

8
tailwind.config.js
View File

@@ -12,12 +12,12 @@ const myThemes = {
warning: 'hsl(50, 98%, 50%)', warning: 'hsl(50, 98%, 50%)',
'primary-content': 'hsl(0, 0%, 98%)', 'primary-content': 'hsl(0, 0%, 98%)',
'error-content': 'hsl(0, 0%, 98%)', 'error-content': 'hsl(0, 0%, 98%)',
'base-100': 'hsl(227, 20%, 10%)', 'base-100': 'hsl(227, 20%, 20%)',
'base-200': 'hsl(227, 20%, 8%)', 'base-200': 'hsl(227, 20%, 13%)',
'base-300': 'hsl(227, 20%, 1%)', 'base-300': 'hsl(227, 20%, 10%)',
}, },
light: { light: {
primary: 'hsl(180, 15%, 60%)', primary: 'hsl(180, 15%, 70%)',
secondary: 'hsl(21, 54%, 83%)', secondary: 'hsl(21, 54%, 83%)',
error: 'hsl(4, 87%, 74%)', error: 'hsl(4, 87%, 74%)',
accent: 'hsl(93, 27%, 73%)', accent: 'hsl(93, 27%, 73%)',