jessebrault/meals-made-easy-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added edit button to recipe page when owner.

Browse Source
This commit is contained in:
Jesse Brault 2024-08-14 20:44:31 -05:00
parent 5bddd1790f
commit e237ea89ee
2 changed files with 50 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/recipe/Recipe.tsx
View File

@ -10,6 +10,25 @@ import { useAuth } from '../../auth'
import RecipeVisibilityIcon from '../../components/recipe-visibility-icon/RecipeVisibilityIcon' import RecipeVisibilityIcon from '../../components/recipe-visibility-icon/RecipeVisibilityIcon'
import UserIconAndName from '../../components/user-icon-and-name/UserIconAndName' import UserIconAndName from '../../components/user-icon-and-name/UserIconAndName'
import classes from './recipe.module.css' import classes from './recipe.module.css'
import { useNavigate } from '@tanstack/react-router'
interface EditButtonProps {
username: string
slug: string
}
const EditButton = ({ username, slug }: EditButtonProps) => {
const navigate = useNavigate()
return (
<button
className={classes.editButton}
onClick={() => navigate({ to: '/recipes/$username/$slug/edit', params: { username, slug } })}
>
<FontAwesomeIcon icon="pencil" className={classes.editIcon} size="sm" />
<span className={classes.buttonText}>Edit</span>
</button>
)
}
interface RecipeStarInfoProps { interface RecipeStarInfoProps {
starCount: number starCount: number
@ -19,7 +38,7 @@ const RecipeStarInfo = ({ starCount }: RecipeStarInfoProps) => {
return ( return (
<div className={classes.starContainer}> <div className={classes.starContainer}>
<FontAwesomeIcon icon="star" className={classes.star} size="sm" /> <FontAwesomeIcon icon="star" className={classes.star} size="sm" />
<span className={classes.starCount}>{starCount}</span> <span className={classes.buttonText}>{starCount}</span>
</div> </div>
) )
} }
@ -80,7 +99,7 @@ const RecipeStarButton = ({ username, slug, isStarred, starCount }: RecipeStarBu
return ( return (
<button className={classes.starContainer} onClick={onClick}> <button className={classes.starContainer} onClick={onClick}>
<FontAwesomeIcon icon="star" className={classes.star} size="sm" /> <FontAwesomeIcon icon="star" className={classes.star} size="sm" />
<span className={classes.starred}>{isStarred ? 'Starred' : 'Star'}</span> <span className={classes.buttonText}>{isStarred ? 'Starred' : 'Star'}</span>
<span className={classes.starCount}>{starCount}</span> <span className={classes.starCount}>{starCount}</span>
</button> </button>
) )
@ -155,11 +174,14 @@ const Recipe = ({ username, slug }: RecipeProps) => {
<div className={classes.info}> <div className={classes.info}>
<div className={classes.infoRow}> <div className={classes.infoRow}>
<h1 className={classes.recipeTitle}>{recipe.title}</h1> <h1 className={classes.recipeTitle}>{recipe.title}</h1>
{isStarred !== null ? ( <div className={classes.infoButtons}>
<RecipeStarButton starCount={recipe.starCount} {...{ isStarred, username, slug }} /> {isStarred !== null ? (
) : ( <RecipeStarButton starCount={recipe.starCount} {...{ isStarred, username, slug }} />
<RecipeStarInfo starCount={recipe.starCount} /> ) : (
)} <RecipeStarInfo starCount={recipe.starCount} />
)}
{isOwner ? <EditButton {...{ username, slug }} /> : null}
</div>
</div> </div>
<div className={classes.infoRow}> <div className={classes.infoRow}>
<UserIconAndName username={recipe.owner.username} /> <UserIconAndName username={recipe.owner.username} />

31
src/pages/recipe/recipe.module.css
View File

@ -30,21 +30,24 @@
width: 100%; width: 100%;
} }
.star-container { .star-container,
.edit-button {
display: flex; display: flex;
column-gap: 5px; column-gap: 5px;
align-items: center; align-items: center;
height: 30px; height: 30px;
} }
button.star-container { button.star-container,
button.edit-button {
cursor: pointer; cursor: pointer;
background-color: var(--off-white-1); background-color: var(--off-white-1);
border: 1px solid var(--off-white-3); border: 1px solid var(--off-white-3);
border-radius: 5px; border-radius: 5px;
} }
button.star-container:hover { button.star-container:hover,
button.edit-button:hover {
background-color: var(--off-white-2); background-color: var(--off-white-2);
} }
@ -52,17 +55,25 @@ button.star-container:hover {
color: var(--primary-yellow); color: var(--primary-yellow);
} }
.starred {
font-family: 'Inter', sans-serif;
font-size: 16px;
}
button .star-count { button .star-count {
font-family: 'Inter', sans-serif;
font-size: 16px;
background-color: var(--off-white-3); background-color: var(--off-white-3);
min-width: 20px; min-width: 20px;
min-height: 16px; min-height: 16px;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
} }
.info-buttons {
display: flex;
align-items: center;
gap: 10px;
}
.edit-icon {
color: var(--primary-red);
}
.button-text {
font-family: 'Inter', sans-serif;
font-size: 16px;
}