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

Change font, add meta title/desc to 404 page

Browse Source
This commit is contained in:
Aaron William Po
2023-02-20 22:57:00 -05:00
parent 8836d1fc9b
commit 6f604b9768
9 changed files with 68 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
components/BeerById/CommentCard.tsx
View File

@@ -1,5 +1,6 @@
import { BeerCommentQueryResultT } from '@/services/BeerComment/schema/BeerCommentQueryResult'; import { BeerCommentQueryResultT } from '@/services/BeerComment/schema/BeerCommentQueryResult';
import { formatDistanceStrict } from 'date-fns'; import { format, formatDistanceStrict } from 'date-fns';
import Link from 'next/link';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Rating } from 'react-daisyui'; import { Rating } from 'react-daisyui';
@@ -13,23 +14,38 @@ const CommentCard: React.FC<{
}, [comment.createdAt]); }, [comment.createdAt]);
return ( return (
<div className="card-body h-64"> <div className="card-body sm:h-64">
<div className="flex justify-between"> <div className="flex flex-col justify-between sm:flex-row">
<div> <div>
<h3 className="text-2xl font-semibold">{comment.postedBy.username}</h3> <h3 className="font-semibold sm:text-2xl">
<h4 className="italic">posted {timeDistance} ago</h4> <Link href={`/users/${comment.postedBy.id}`} className="link-hover link">
{comment.postedBy.username}
</Link>
</h3>
<h4 className="italic">
posted{' '}
<time
className="tooltip tooltip-bottom"
data-tip={format(new Date(comment.createdAt), 'MM/dd/yyyy')}
>
{timeDistance}
</time>{' '}
ago
</h4>
</div>
<div>
<Rating value={comment.rating}>
{Array.from({ length: 5 }).map((val, index) => (
<Rating.Item
name="rating-1"
className="mask mask-star cursor-default"
disabled
aria-disabled
key={index}
/>
))}
</Rating>
</div> </div>
<Rating value={comment.rating}>
{Array.from({ length: 5 }).map((val, index) => (
<Rating.Item
name="rating-1"
className="mask mask-star cursor-default"
disabled
aria-disabled
key={index}
/>
))}
</Rating>
</div> </div>
<p>{comment.content}</p> <p>{comment.content}</p>
</div> </div>

2
components/Login/LoginForm.tsx
View File

@@ -74,7 +74,7 @@ const LoginForm = () => {
{responseError && <ErrorAlert error={responseError} setError={setResponseError} />} {responseError && <ErrorAlert error={responseError} setError={setResponseError} />}
<div className="w-full"> <div className="w-full">
<button type="submit" className="btn-primary btn w-full"> <button type="submit" className="btn btn-primary w-full">
Login Login
</button> </button>
</div> </div>

4
components/ui/Navbar.tsx
View File

@@ -44,7 +44,7 @@ const Navbar = () => {
return ( return (
<nav className="navbar bg-primary text-primary-content"> <nav className="navbar bg-primary text-primary-content">
<div className="flex-1"> <div className="flex-1">
<Link className="btn-ghost btn text-3xl normal-case" href="/"> <Link className="btn btn-ghost text-3xl normal-case" href="/">
<span className="cursor-pointer text-xl font-bold">The Biergarten App</span> <span className="cursor-pointer text-xl font-bold">The Biergarten App</span>
</Link> </Link>
</div> </div>
@@ -69,7 +69,7 @@ const Navbar = () => {
</div> </div>
<div className="flex-none lg:hidden"> <div className="flex-none lg:hidden">
<div className="dropdown-end dropdown"> <div className="dropdown-end dropdown">
<label tabIndex={0} className="btn-ghost btn-circle btn"> <label tabIndex={0} className="btn btn-ghost btn-circle">
<span className="w-10 rounded-full"> <span className="w-10 rounded-full">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

2
components/ui/alerts/ErrorAlert.tsx
View File

@@ -16,7 +16,7 @@ const ErrorAlert: FC<ErrorAlertProps> = ({ error, setError }) => {
<div className="flex-none"> <div className="flex-none">
<button <button
className="btn-ghost btn-sm btn" className="btn btn-ghost btn-sm"
type="button" type="button"
onClick={() => { onClick={() => {
setError(''); setError('');

5
pages/404.tsx
View File

@@ -2,10 +2,15 @@
import Layout from '@/components/ui/Layout'; import Layout from '@/components/ui/Layout';
import { NextPage } from 'next'; import { NextPage } from 'next';
import Head from 'next/head';
const NotFound: NextPage = () => { const NotFound: NextPage = () => {
return ( return (
<Layout> <Layout>
<Head>
<title>404 Page Not Found</title>
<meta name="description" content="404 Page Not Found" />
</Head>
<div className="flex h-full flex-col items-center justify-center space-y-4"> <div className="flex h-full flex-col items-center justify-center space-y-4">
<h1 className="text-7xl font-bold">Error: 404</h1> <h1 className="text-7xl font-bold">Error: 404</h1>
<h2 className="text-xl font-bold">Page Not Found</h2> <h2 className="text-xl font-bold">Page Not Found</h2>

2
pages/beers/[id].tsx
View File

@@ -106,7 +106,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({
Next Comments Next Comments
</Link> </Link>
<Link <Link
className={`btn-outline btn ${ className={`btn btn-outline ${
commentsPageNum === commentsPageCount commentsPageNum === commentsPageCount
? 'btn-disabled pointer-events-none' ? 'btn-disabled pointer-events-none'
: 'pointer-events-auto' : 'pointer-events-auto'

18
pages/login/index.tsx
View File

@@ -8,6 +8,7 @@ import Image from 'next/image';
import { FaUserCircle } from 'react-icons/fa'; import { FaUserCircle } from 'react-icons/fa';
import Head from 'next/head'; import Head from 'next/head';
import Link from 'next/link';
const LoginPage: NextPage = () => { const LoginPage: NextPage = () => {
const { user } = useUser(); const { user } = useUser();
@@ -38,14 +39,23 @@ const LoginPage: NextPage = () => {
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />
</div> </div>
<div className="flex h-full w-full flex-col items-center space-y-5 bg-base-300 lg:w-[40%]"> <div className="flex h-full w-full flex-col items-center justify-center bg-base-300 lg:w-[40%]">
<div className="mt-44 w-9/12"> <div className="w-10/12 space-y-5 sm:w-9/12">
<div className=" flex flex-col items-center space-y-2"> <div className=" flex flex-col items-center space-y-2">
<FaUserCircle className="text-3xl" /> <FaUserCircle className="text-3xl" />
<h1 className="text-4xl font-bold">Login</h1> <h1 className="text-4xl font-bold">Login</h1>
</div> </div>
<div className="mt-10"> <LoginForm />
<LoginForm /> <div className="mt-3 flex flex-col items-center space-y-1">
<Link href="/register" className="text-primary-500 link-hover link italic">
Don&apos;t have an account?
</Link>
<Link
href="/reset-password"
className="text-primary-500 link-hover link italic"
>
Forgot password?
</Link>
</div> </div>
</div> </div>
</div> </div>

8
styles/globals.css
View File

@@ -1,3 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base {
html {
font-family: 'Exo 2', sans-serif;
}
}

7
tailwind.config.js
View File

@@ -10,6 +10,7 @@ module.exports = {
extend: {}, extend: {},
}, },
plugins: [require('daisyui')], plugins: [require('daisyui')],
daisyui: { daisyui: {
logs: false, logs: false,
themes: [ themes: [
@@ -25,9 +26,9 @@ module.exports = {
error: '#CF1259', error: '#CF1259',
'primary-content': '#FAF9F6', 'primary-content': '#FAF9F6',
'error-content': '#FAF9F6', 'error-content': '#FAF9F6',
'base-100': 'hsl(190, 4%, 15%)', 'base-100': 'hsl(190, 4%, 11%)',
'base-200': 'hsl(190, 4%, 12%)', 'base-200': 'hsl(190, 4%, 9%)',
'base-300': 'hsl(190, 4%, 10%)', 'base-300': 'hsl(190, 4%, 8%)',
}, },
}, },
], ],