alt/zot-wo-auth
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added filter cards, finished initial explore page layout

Browse Source 
Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
Raul Kele 2022-07-10 15:36:25 +03:00 committed by Ramkumar Chinchani
parent faf481c0c5
commit 1c12fafbd6
4 changed files with 85 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/Explore.jsx
View File

@ -15,6 +15,7 @@ import api from '../api.js';
import {URL} from '../constants';
import {host} from '../constants';
import {isEmpty} from 'lodash';
import FilterCard from './FilterCard.jsx';
//
const useStyles = makeStyles(() => ({
@ -32,7 +33,8 @@ const useStyles = makeStyles(() => ({
},
resultsRow: {
justifyContent:"space-between",
alignItems:"center"
alignItems:"center",
color:"#00000099"
}
}));
@ -106,9 +108,21 @@ function Explore ({ keywords, data, updateData }) {
});
}
const renderFilterCards = () => {
return (
<Stack spacing={2}>
<FilterCard title="Products" filters={["Images","Plugins"]}/>
<FilterCard title="Images" filters={["Verified publisher","Official images"]}/>
<FilterCard title="Operating system" filters={["Windows","Linux"]}/>
<FilterCard title="Architectures" filters={["ARM", "ARM 64", "IBM POWER", "IBM Z", "PowerPC 64 LE", "x86", "x86-64"]}/>
</Stack>
);
};
return (
<Container maxWidth="md">
<Container maxWidth="lg">
{ isLoading && <Loading /> }
{ !(filteredData && filteredData.length) ? (
<Grid container className={classes.nodataWrapper}>
<div style={{marginTop: 20}}>
@ -119,18 +133,27 @@ function Explore ({ keywords, data, updateData }) {
</Grid>
) : (
<Grid container className={classes.gridWrapper}>
<Grid item xs={12}>
<Stack direction="row" className={classes.resultsRow}>
<Typography variant="body2">Results {filteredData.length}</Typography>
<FormControl sx={{m:'1', minWidth:"75px"}}>
<InputLabel>Sort</InputLabel>
<Select label="Sort">
</Select>
</FormControl>
</Stack>
<div style={{marginTop: 20}}>
<Stack direction="column" spacing={2}>{renderRepoCards()}</Stack>
</div>
<Grid container item xs={12}>
<Grid item xs={3}>
</Grid>
<Grid item xs={9}>
<Stack direction="row" className={classes.resultsRow}>
<Typography variant="body2" >Results {filteredData.length}</Typography>
<FormControl sx={{m:'1', minWidth:"75px"}} size="small">
<InputLabel>Sort</InputLabel>
<Select label="Sort">
</Select>
</FormControl>
</Stack>
</Grid>
</Grid>
<Grid container item xs={12} spacing={5} pt={1}>
<Grid item xs={3}>
{renderFilterCards()}
</Grid>
<Grid item xs={9}>
<Stack direction="column" spacing={2}>{renderRepoCards()}</Stack>
</Grid>
</Grid>
</Grid>
)

42
src/components/FilterCard.jsx Normal file
View File

@ -0,0 +1,42 @@
import { Card, CardContent, CardHeader, Checkbox, FormControl, FormControlLabel, Stack, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React from 'react';
const useStyles = makeStyles(() => ({
card: {
display:"flex",
minWidth:'15%',
alignItems:'flex-start',
background:"#FFFFFF",
boxShadow:"0px 5px 10px rgba(131, 131, 131, 0.08)",
borderRadius: "24px"
}
}));
function FilterCard(props) {
const classes = useStyles();
const {title, filters} = props;
const getFilterRows = () => {
const filterRows = filters || ["ARM", "ARM 64", "IBM POWER", "IBM Z", "PowerPC 64 LE", "x86", "x86-64"];
return filterRows.map((filter) => {
return (
<FormControlLabel componentsProps={{typography:{variant:"body2"}}} control={<Checkbox />} label={filter}/>
)
})
}
return (
<Card variant="outlined" className={classes.card}>
<CardContent>
<Typography variant="h6">{title || "Filter Title"}</Typography>
<Stack direction="column">
{getFilterRows()}
</Stack>
</CardContent>
</Card>
)
}
export default FilterCard;

4
src/components/RepoCard.jsx
View File

@ -19,12 +19,12 @@ import repocube4 from '../assets/repocube-4.png';
// temporary utility to get image
const randomIntFromInterval = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min)
}
};
const randomImage = () => {
const imageArray = [repocube1,repocube2,repocube3,repocube4];
return imageArray[randomIntFromInterval(0,3)];
}
};
const useStyles = makeStyles(() => ({
card: {

7
src/pages/HomePage.jsx
View File

@ -9,9 +9,10 @@ import {Container, Grid, Stack} from '@mui/material';
const useStyles = makeStyles((theme) => ({
container: {
paddingTop: 5,
paddingTop: 30,
paddingBottom: 5,
height: '100%'
height: '100%',
minWidth:'60%'
},
gridWrapper: {
// backgroundColor: "#fff",
@ -31,7 +32,7 @@ function HomePage({ data, updateData, keywords, updateKeywords }) {
return (
<Stack className={classes.pageWrapper} direction="column">
<Header updateKeywords={updateKeywords}></Header>
<Container maxWidth="md" className={classes.container} >
<Container className={classes.container} >
<Grid container className={classes.gridWrapper}>
<Grid item className={classes.tile}>
<Rightbar keywords={keywords} data={data} updateData={updateData}/>