mirror of
https://github.com/sigmasternchen/tagify
synced 2025-03-15 07:08:55 +00:00
feat: added detail page
This commit is contained in:
parent
b6f1c5763a
commit
380a0ece0b
4 changed files with 43 additions and 18 deletions
29
src/components/MediaDetails/index.tsx
Normal file
29
src/components/MediaDetails/index.tsx
Normal file
|
@ -0,0 +1,29 @@
|
|||
import React, {FunctionComponent} from "react";
|
||||
import {MediaFile} from "../../database/file";
|
||||
import MediaPreview from "../MediaPreview";
|
||||
|
||||
export type MediaDetailsProps = {
|
||||
basePath: string,
|
||||
file: MediaFile
|
||||
}
|
||||
|
||||
const MediaDetails: FunctionComponent<MediaDetailsProps> = ({basePath, file}) => {
|
||||
return (
|
||||
<div>
|
||||
<MediaPreview basePath={basePath} file={file} />
|
||||
<div>
|
||||
Path: {file.getPath()} <br />
|
||||
Tags:
|
||||
<ul>
|
||||
{
|
||||
file.getTags().map(t => (
|
||||
<li key={t}>{t}</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MediaDetails
|
|
@ -4,15 +4,16 @@ import MediaListItem from "../MediaListItem";
|
|||
|
||||
export type MediaListProps = {
|
||||
basePath: string,
|
||||
files: MediaFile[]
|
||||
files: MediaFile[],
|
||||
onSelect: (file: MediaFile) => void
|
||||
}
|
||||
|
||||
const MediaList: FunctionComponent<MediaListProps> = ({basePath, files}) => {
|
||||
const MediaList: FunctionComponent<MediaListProps> = ({basePath, files, onSelect}) => {
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
files.map(f => (
|
||||
<MediaListItem basePath={basePath} file={f} />
|
||||
<MediaListItem basePath={basePath} file={f} onClick={onSelect} />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
|
|
@ -4,23 +4,14 @@ import MediaPreview from "../MediaPreview";
|
|||
|
||||
export type MediaListItemProps = {
|
||||
basePath: string,
|
||||
file: MediaFile
|
||||
file: MediaFile,
|
||||
onClick: (file: MediaFile) => void
|
||||
}
|
||||
|
||||
const MediaListItem: FunctionComponent<MediaListItemProps> = ({basePath, file}) => {
|
||||
const MediaListItem: FunctionComponent<MediaListItemProps> = ({basePath, file, onClick}) => {
|
||||
return (
|
||||
<div>
|
||||
<div onClick={() => onClick(file)}>
|
||||
<MediaPreview basePath={basePath} file={file} />
|
||||
<div>
|
||||
Tags:
|
||||
<ul>
|
||||
{
|
||||
file.getTags().map(t => (
|
||||
<li key={t}>{t}</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -5,6 +5,7 @@ import {MediaFile} from "../../database/file";
|
|||
import {useRepository} from "../../components/RepositoryProvider";
|
||||
import {Query} from "../../database/query";
|
||||
import {Database} from "../../database/database";
|
||||
import MediaDetails from "../../components/MediaDetails";
|
||||
|
||||
export type HomeProps = {
|
||||
}
|
||||
|
@ -56,10 +57,13 @@ const Home: FunctionComponent<HomeProps> = () => {
|
|||
<>
|
||||
<Sidebar countedTags={query.countedTags()} />
|
||||
{ selected &&
|
||||
<></>
|
||||
<>
|
||||
<button onClick={() => setSelected(null)}>Back</button>
|
||||
<MediaDetails basePath={repository.getPath()} file={selected} />
|
||||
</>
|
||||
}
|
||||
{ !selected &&
|
||||
<MediaList basePath={repository.getPath()} files={query.get()} />
|
||||
<MediaList basePath={repository.getPath()} files={query.get()} onSelect={setSelected} />
|
||||
}
|
||||
</>
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue