fdel/magic-card-valuator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing styling, and removing strict from tsconfig

Browse Source
This commit is contained in:
Frank Delaguila
2022-11-05 18:09:09 -06:00
parent a036c449f7
commit 2023d09286
8 changed files with 142 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/_document.tsx
View File

@@ -3,13 +3,11 @@ import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html>
<Head>
<title>Magic Card Valuator</title>
</Head>
<Head />
<body>
<Main />
{/* Here we will mount our modal portal */}
<div id="modal-root" />
<div id="modal-root"/>
<NextScript />
</body>
</Html>

21
pages/index.tsx
View File

@@ -2,7 +2,7 @@ import Head from 'next/head';
import { invoke } from '@tauri-apps/api/tauri';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import React, { useEffect, useState, useMemo } from 'react';
import { useEffect, useState, useMemo, useRef, MutableRefObject, RefObject } from 'react';
import { debounce } from 'lodash';
import Modal from '../components/modal';
@@ -11,11 +11,12 @@ export default function Home() {
const [search, setSearch] = useState('');
const [selectedCard, setSelectedCard] = useState({});
const [cards, setCards] = useState([]);
const [cards, setCards] = useState<any>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [queryParams, setQueryParams] = useState('');
const [modalOpen, setModalOpen] = useState(false);
const modalRef = useRef<HTMLDivElement>(null);
const searchForCard = async (event: React.ChangeEvent<HTMLInputElement>) => {
event.stopPropagation();
@@ -40,6 +41,9 @@ export default function Home() {
return (
<div>
<Head>
<title>Magic Card Valuator</title>
</Head>
<div className="absolute bg-red-800 w-96 bg-red-800 right-0 top-0 rounded-md mr-4 mt-4 p-4">
{error}
@@ -53,17 +57,20 @@ export default function Home() {
</div>
<main className="container my-4">
{ cards?.length === 0 || !cards ?
{ cards.length === 0 || !cards ?
<div>Please search for a card</div>
:
<section className="flex flex-wrap justify-center items-center">
{loading && search !== "" ?
<div className="spinner mx-auto"></div>
:
cards && cards.map( (card: any) => <Image onClick={() => {
cards && cards.map( (card: any) =>
<Image onClick={() => {
setSelectedCard(card);
setModalOpen(true);
}} className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2" key={card.id} alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} /> )
document.body.classList.toggle('prevent-scroll');
}} className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2" key={card.id} alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
)
}
</section>
}
@@ -78,9 +85,7 @@ export default function Home() {
</a>
</footer>
{modalOpen ?
<Modal open={setModalOpen} />
: null}
<Modal ref={modalRef} modalOpen={modalOpen} toggleModal={setModalOpen} card={selectedCard} />
</div>
)