diff --git a/src/App.css b/src/App.css index 7d3d4e8..a60bc9b 100644 --- a/src/App.css +++ b/src/App.css @@ -63,7 +63,16 @@ body { background-color: #0056b3; } +.PlaceholderItem > button, .ParentDirectoryItem > button { background-color: #4D4F5D; } +.PlaceholderItem > a { + height: 1em; +} + +.PlaceholderItem > button { + height: calc(16px + 10px * 2); + width: 6em; +} diff --git a/src/App.tsx b/src/App.tsx index d1fd70a..f2c6c4e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import './App.css'; import Gallery from './Gallery/index'; diff --git a/src/Gallery/index.tsx b/src/Gallery/index.tsx index 8366394..78c71b3 100644 --- a/src/Gallery/index.tsx +++ b/src/Gallery/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; import '../App.css'; +import placeholderPng from './placeholder.png'; import { useState, useEffect } from 'react'; function Gallery() { @@ -13,7 +14,7 @@ function Gallery() { }, [category]); const updateCategory = (category: string) => { - setData([]); + setData(getPlaceholderData); setCategory(category); }; @@ -33,6 +34,8 @@ interface galleryItemInfo { is_dir: boolean; url: string; thumbnail_url: string; + + isPlaceholder: boolean; } function Contents( @@ -61,6 +64,7 @@ function Contents( thumbnail_url: item.thumbnail_url === null ? item.url : item.thumbnail_url, onClick: () => {}, + isPlaceholder: item.isPlaceholder, }; if (item.is_dir) { @@ -87,11 +91,13 @@ interface galleryItem { url: string; thumbnail_url: string; onClick: () => void; + isPlaceholder: boolean; } -function ImageItem({ thumbnail_url, url }: galleryItem) { +function ImageItem({ thumbnail_url, url, isPlaceholder }: galleryItem) { + const placeholderClass = isPlaceholder ? 'PlaceholderItem' : ''; return ( -