improve

Author: kentcdodds

exercises/01.start/01.problem.vite-plugin/app/routes/index.tsx

@@ -44,7 +44,9 @@ export default function MoviesPage({ loaderData }: Route.ComponentProps) {
 										{movie.description}
 									</p>
 									<div className="flex items-center gap-2">
-										<span className="rr-badge">
+										<span
+											className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+										>
 											{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
 										</span>
 									</div>

exercises/01.start/01.problem.vite-plugin/app/routes/movie-details.tsx

@@ -51,7 +51,11 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 							</h1>
 							<div className="mb-4 flex items-center gap-4">
 								<span className="rr-text text-lg">{movie.year}</span>
-								<span className="rr-badge">Rating: {movie.rating}/10</span>
+								<span
+									className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+								>
+									Rating: {movie.rating}/10
+								</span>
 								<Form method="post" preventScrollReset>
 									<input type="hidden" name="id" value={movie.id} />
 									<input
@@ -61,7 +65,7 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 									/>
 									<button
 										type="submit"
-										className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+										className={`rr-badge cursor-pointer ${movie.isFavorite ? 'rr-badge-red' : ''}`}
 									>
 										{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
 									</button>

exercises/01.start/01.solution.vite-plugin/app/routes/index.tsx

@@ -44,7 +44,9 @@ export default function MoviesPage({ loaderData }: Route.ComponentProps) {
 										{movie.description}
 									</p>
 									<div className="flex items-center gap-2">
-										<span className="rr-badge">
+										<span
+											className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+										>
 											{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
 										</span>
 									</div>

exercises/01.start/01.solution.vite-plugin/app/routes/movie-details.tsx

@@ -51,7 +51,11 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 							</h1>
 							<div className="mb-4 flex items-center gap-4">
 								<span className="rr-text text-lg">{movie.year}</span>
-								<span className="rr-badge">Rating: {movie.rating}/10</span>
+								<span
+									className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+								>
+									Rating: {movie.rating}/10
+								</span>
 								<Form method="post" preventScrollReset>
 									<input type="hidden" name="id" value={movie.id} />
 									<input
@@ -61,7 +65,7 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 									/>
 									<button
 										type="submit"
-										className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+										className={`rr-badge cursor-pointer ${movie.isFavorite ? 'rr-badge-red' : ''}`}
 									>
 										{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
 									</button>

exercises/01.start/02.solution.loader-rsc/app/routes/index.tsx

@@ -23,7 +23,9 @@ export async function loader() {
 					{movie.description}
 				</p>
 				<div className="flex items-center gap-2">
-					<span className="rr-badge">
+					<span
+						className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+					>
 						{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
 					</span>
 				</div>

exercises/01.start/02.solution.loader-rsc/app/routes/movie-details.tsx

@@ -51,7 +51,11 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 							</h1>
 							<div className="mb-4 flex items-center gap-4">
 								<span className="rr-text text-lg">{movie.year}</span>
-								<span className="rr-badge">Rating: {movie.rating}/10</span>
+								<span
+									className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+								>
+									Rating: {movie.rating}/10
+								</span>
 								<Form method="post" preventScrollReset>
 									<input type="hidden" name="id" value={movie.id} />
 									<input
@@ -61,7 +65,7 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 									/>
 									<button
 										type="submit"
-										className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+										className={`rr-badge cursor-pointer ${movie.isFavorite ? 'rr-badge-red' : ''}`}
 									>
 										{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
 									</button>

exercises/01.start/03.solution.rsc-route/app/routes/index.tsx

@@ -38,7 +38,9 @@ export async function ServerComponent() {
 										{movie.description}
 									</p>
 									<div className="flex items-center gap-2">
-										<span className="rr-badge">
+										<span
+											className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+										>
 											{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
 										</span>
 									</div>

exercises/01.start/03.solution.rsc-route/app/routes/movie-details.tsx

@@ -51,7 +51,11 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 							</h1>
 							<div className="mb-4 flex items-center gap-4">
 								<span className="rr-text text-lg">{movie.year}</span>
-								<span className="rr-badge">Rating: {movie.rating}/10</span>
+								<span
+									className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+								>
+									Rating: {movie.rating}/10
+								</span>
 								<Form method="post" preventScrollReset>
 									<input type="hidden" name="id" value={movie.id} />
 									<input
@@ -61,7 +65,7 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 									/>
 									<button
 										type="submit"
-										className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+										className={`rr-badge cursor-pointer ${movie.isFavorite ? 'rr-badge-red' : ''}`}
 									>
 										{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
 									</button>

exercises/01.start/04.solution.server-fns/app/routes/index.tsx

@@ -38,7 +38,9 @@ export async function ServerComponent() {
 										{movie.description}
 									</p>
 									<div className="flex items-center gap-2">
-										<span className="rr-badge">
+										<span
+											className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+										>
 											{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
 										</span>
 									</div>

exercises/01.start/04.solution.server-fns/app/routes/movie-details.tsx

@@ -39,7 +39,11 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 							</h1>
 							<div className="mb-4 flex items-center gap-4">
 								<span className="rr-text text-lg">{movie.year}</span>
-								<span className="rr-badge">Rating: {movie.rating}/10</span>
+								<span
+									className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+								>
+									Rating: {movie.rating}/10
+								</span>
 								<form action={setIsFavorite}>
 									<input type="hidden" name="id" value={movie.id} />
 									<input
@@ -49,7 +53,7 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 									/>
 									<button
 										type="submit"
-										className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
+										className={`rr-badge cursor-pointer ${movie.isFavorite ? 'rr-badge-red' : ''}`}
 									>
 										{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
 									</button>