elder_scrolling/src/App.tsx

44 lines
1.1 KiB
TypeScript

import * as React from "react";
import "./App.scss";
import { Cards } from "./cards/Cards";
import { SearchBox } from "./cards/Search";
const { useState } = React;
const PAGE_SIZE = 20;
const firstUrl = "https://api.elderscrollslegends.io/v1/cards";
const buildUrl = (searchTerm: string) => {
const querySize = `pageSize=${PAGE_SIZE}`;
if (searchTerm === "") {
return firstUrl + "?" + querySize;
}
const codedSearchTerm = searchTerm.trim().replace(/\s+/g, "%20");
return firstUrl + `?name=${codedSearchTerm}&${querySize}`;
};
function App() {
const [searchTerm, setSearchTerm] = useState("");
return (
<div className="elder-scrolling">
<div className="container">
<header>
<div className="left">
<h1>Elder Scroll Legends</h1>
</div>
<div className="right">
<SearchBox initialValue={searchTerm} onSearch={setSearchTerm} />
</div>
</header>
</div>
<section>
<Cards rootUrl={buildUrl(searchTerm)} />
</section>
</div>
);
}
export default App;