ruidy/ticket_manager
1
0
Fork 0
mirror of https://github.com/rjNemo/ticket_manager synced 2026-06-06 00:36:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update FileCollection: File Entry

Browse source
This commit is contained in:
Ruidy Nemausat 2020-04-03 13:57:35 +02:00
parent 12a8e9e289
commit 084f666ff1
1 changed files with 38 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
client/src/components/FileCollection.tsx
View file

@ -1,4 +1,13 @@
import React, { FC } from "react";
import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import ImageIcon from "@material-ui/icons/Image";
import WorkIcon from "@material-ui/icons/Work";
import BeachAccessIcon from "@material-ui/icons/BeachAccess";
import { AppFile } from "../types/AppFile";
type IProps = {
@ -6,10 +15,21 @@ type IProps = {
filterText: string;
};
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper
}
})
);
export const FileCollection: FC<IProps> = ({ files, filterText }) => {
const classes = useStyles();
return (
<>
<ul className="collection">
<List className={classes.root}>
{files.length === 0 ? (
<FileEntry />
) : (
@ -21,8 +41,8 @@ export const FileCollection: FC<IProps> = ({ files, filterText }) => {
)
.map((file: AppFile) => <FileEntry file={file} key={file.id} />)
)}
</ul>
</>
</List>
);
};
@ -32,16 +52,19 @@ type IFProps = {
export const FileEntry: FC<IFProps> = ({ file }) => {
return (
<li className="collection-item avatar">
{/* <img src={require("../images/user_1.jpg")} alt="" className="circle" /> */}
<i className="material-icons circle indigo lighten-1">folder</i>
<span className="title">{file ? file.name : "Add your first file"}</span>
<p>
{file ? file.size : 0}kb {file ? file.format : "pdf"}
</p>
<a href="#!" className="secondary-content">
<i className="material-icons">more_vert</i>
</a>
</li>
<ListItem>
<ListItemAvatar>
<Avatar>
<WorkIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={file ? file.name : "Add your first file"} secondary={`${file ? file.size : 0}kb ${file ? file.format : "pdf"}`} />
</ListItem>
);
};