added common className variables for buttons, fixed some styling with the mobile view

This commit is contained in:
cscough 2024-05-26 22:44:56 -04:00
parent 81e0e88eaa
commit 8afe43cb96
7 changed files with 19 additions and 26 deletions

View File

@ -13,7 +13,6 @@ test("queryOMDb returns movie with error", async () => {
expect(data).toHaveProperty("Response", "False"); expect(data).toHaveProperty("Response", "False");
}); });
// f=dune
// Warning: React does not recognize the `fetchPriority` prop on a DOM element // Warning: React does not recognize the `fetchPriority` prop on a DOM element
// The `punycode` module is deprecated. Please use a userland alternative instead. // The `punycode` module is deprecated. Please use a userland alternative instead.

View File

@ -1,3 +1,4 @@
import { primaryBtn, secondaryBtn } from "@/common/classes";
import { revalidatePath } from "next/cache"; import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
@ -21,13 +22,13 @@ export default function SearchBar() {
<div className="flex gap-4 justify-center"> <div className="flex gap-4 justify-center">
<button <button
type="submit" type="submit"
className={`rounded px-2 bg-purple-500 hover:bg-purple-700`} className={primaryBtn}
> >
Search Search
</button> </button>
<button <button
type="reset" type="reset"
className={`rounded px-2 bg-gray-400 hover:bg-gray-600`} className={secondaryBtn}
> >
Clear Clear
</button> </button>

View File

@ -19,6 +19,7 @@
} }
.description a { .description a {
margin-top: 50px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -27,7 +28,7 @@
.description p { .description p {
position: relative; position: relative;
margin: 0; margin-top: 50px;
padding: 1rem; padding: 1rem;
background-color: rgba(var(--callout-rgb), 0.5); background-color: rgba(var(--callout-rgb), 0.5);
border: 1px solid rgba(var(--callout-border-rgb), 0.3); border: 1px solid rgba(var(--callout-border-rgb), 0.3);

View File

@ -1,18 +1,13 @@
import Image from "next/image"; import Image from "next/image";
import styles from "./page.module.css"; import styles from "./page.module.css";
import Link from "next/link"; import Link from "next/link";
import { primaryBtn } from "@/common/classes";
export default function Home() { export default function Home() {
return ( return (
<main <main className={styles.main}>
className={styles.main} <div className={styles.description}>
> <p>A simple app to let you search for movies by title.</p>
<div
className={styles.description}
>
<p>
A simple app to let you search for movies by title.
</p>
<div> <div>
<a <a
href="https://lysted.com" href="https://lysted.com"
@ -33,11 +28,9 @@ export default function Home() {
<div className="container m-auto"> <div className="container m-auto">
<div className="flex justify-center"> <div className="flex justify-center">
<Link href={"/Search"} className="mx-auto"> <Link href={"/Search"} className="mx-auto">
<button className="mt-2 px-4 rounded bg-purple-500 hover:bg-purple-700" > <button className={`mt-2 ${primaryBtn}`}>Start searching!</button>
Start searching! </Link>
</button>
</Link>
</div> </div>
</div> </div>
</main> </main>

View File

@ -1 +1,4 @@
const responsiveContainer = '' const btn = "px-4 py-2 rounded";
export const primaryBtn = `${btn} text-white bg-purple-500 hover:bg-purple-700`;
export const secondaryBtn = `${btn} bg-gray-400 hover:bg-gray-600`;

View File

@ -1,6 +1,7 @@
import FavoriteBtn from "@/common/components/FavoriteBtn"; import FavoriteBtn from "@/common/components/FavoriteBtn";
import ImgCard from "@/common/components/ImgCard"; import ImgCard from "@/common/components/ImgCard";
import Link from "next/link"; import Link from "next/link";
import { primaryBtn } from "../classes";
export interface IMovieCardItem { export interface IMovieCardItem {
Title: string; Title: string;
@ -27,11 +28,8 @@ export default function MovieCard({ movie }: IMovieCardProps) {
<p className=" text-sm text-gray-700">Circa: {movie.Year}</p> <p className=" text-sm text-gray-700">Circa: {movie.Year}</p>
<div className="flex gap-3 justify-around"> <div className="flex gap-3 justify-around">
<Link <Link href={`/Movie?i=${movie.imdbID}`}>
href={`/Movie?i=${movie.imdbID}`} <button className={primaryBtn}>Movie Details</button>
className="block rounded-lg bg-purple-500 px-4 py-2 text-center font-semibold text-white hover:bg-purple-600"
>
Movie Details
</Link> </Link>
<FavoriteBtn movie={movie} /> <FavoriteBtn movie={movie} />
</div> </div>

View File

@ -6,7 +6,6 @@ export interface IMovieListProps {
export default function MovieList({ movies }: IMovieListProps) { export default function MovieList({ movies }: IMovieListProps) {
return ( return (
<div className="container m-auto">
<div <div
className={`p-1 flex justify-around flex-wrap gap-4 sm:justify-center `} className={`p-1 flex justify-around flex-wrap gap-4 sm:justify-center `}
> >
@ -20,6 +19,5 @@ export default function MovieList({ movies }: IMovieListProps) {
<h1>Nothing to show</h1> <h1>Nothing to show</h1>
)} )}
</div> </div>
</div>
); );
} }