Switch img to NextImage.

This commit is contained in:
n8detar 2022-04-16 10:51:47 -07:00
parent d3fd032a81
commit 7291511eb8
1 changed files with 33 additions and 18 deletions

View File

@ -4,6 +4,12 @@ import { useState } from "react";
import { dehydrate, QueryClient, useQuery } from "react-query"; import { dehydrate, QueryClient, useQuery } from "react-query";
import { CustomHead } from "../components/CustomHead"; import { CustomHead } from "../components/CustomHead";
import { Layout } from "../components/Layout"; import { Layout } from "../components/Layout";
import NextImage from "next/image";
import RescanIcon from "../images/icon-rescan.svg";
import DownloadIcon from "../images/icon-download.svg";
import AddIcon from "../images/icon-add.svg";
import GridViewIcon from "../images/icon-gridview.svg";
import ListViewIcon from "../images/icon-listview.svg";
type ViewStyle = "grid" | "list"; type ViewStyle = "grid" | "list";
@ -49,34 +55,37 @@ const Download: NextPage = () => {
<div id="downloadControl"></div> <div id="downloadControl"></div>
<div className="info-box info-box-3"> <div className="info-box info-box-3">
<div className="icon-text"> <div className="icon-text">
<img <NextImage
id="rescan-icon" width={80}
onClick={() => console.log("rescanPending()")} height={80}
src="/img/icon-rescan.svg" src={RescanIcon}
alt="rescan-icon" alt="rescan-icon"
title="Rescan subscriptions" title="Rescan subscriptions"
onClick={() => console.log("rescanPending()")}
/> />
{/* <img id="rescan-icon" onclick="rescanPending()" src="{% static 'img/icon-rescan.svg' %}" alt="rescan-icon"></img> */} {/* <img id="rescan-icon" onclick="rescanPending()" src="{% static 'img/icon-rescan.svg' %}" alt="rescan-icon"></img> */}
<p>Rescan subscriptions</p> <p>Rescan subscriptions</p>
</div> </div>
<div className="icon-text"> <div className="icon-text">
<img <NextImage
id="download-icon" width={80}
onClick={() => console.log("dlPending()")} height={80}
src="/img/icon-download.svg" src={DownloadIcon}
alt="download-icon" alt="download-icon"
title="Start download" title="Start download"
onClick={() => console.log("dlPending()")}
/> />
{/* <img id="download-icon" onclick="dlPending()" src="{% static 'img/icon-download.svg' %}" alt="download-icon"></img> */} {/* <img id="download-icon" onclick="dlPending()" src="{% static 'img/icon-download.svg' %}" alt="download-icon"></img> */}
<p>Start download</p> <p>Start download</p>
</div> </div>
<div className="icon-text"> <div className="icon-text">
<img <NextImage
id="animate-icon" width={80}
onClick={() => console.log("showForm()")} height={80}
src="/img/icon-add.svg" src={AddIcon}
alt="add-icon" alt="add-icon"
title="Add to download queue" title="Add to download queue"
onClick={() => console.log("showForm()")}
/> />
<p>Add to download queue</p> <p>Add to download queue</p>
<div className="show-form"> <div className="show-form">
@ -109,16 +118,22 @@ const Download: NextPage = () => {
</div> </div>
</div> </div>
<div className="view-icons"> <div className="view-icons">
<img <NextImage
src="/img/icon-gridview.svg" width={30}
onClick={() => handleSetViewstyle("grid")} height={44}
src={GridViewIcon}
alt="grid view" alt="grid view"
title="Switch to grid view"
onClick={() => handleSetViewstyle("grid")}
/> />
{/* <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view"> */} {/* <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view"> */}
<img <NextImage
src="/img/icon-listview.svg" width={30}
onClick={() => handleSetViewstyle("list")} height={44}
src={ListViewIcon}
alt="list view" alt="list view"
title="Switch to list view"
onClick={() => handleSetViewstyle("list")}
/> />
{/* <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view"> */} {/* <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view"> */}
</div> </div>