WIP Item Store: finish item card carousel

It's a circular linked list

src/Components/ItemCarousel.js

@@ -22,6 +22,9 @@ import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import ItemCard from './ItemCard.js';
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+import IconButton from '@material-ui/core/IconButton';
 
 //url/user_items/index?q={"item_type": umdaqueles, "op": "none", "unlock_rule": "purchase"}
 export default function ItemCarousel (props) {
@@ -29,13 +32,13 @@ export default function ItemCarousel (props) {
 				const [right, setRight] = useState(5);
 
 				const goLeft = () => {
-					setLeft(left-1);
-					setRight(right-1);
+					setRight(right == 0 ? props.items.length-1 : right-1);
+					setLeft(left == 0 ? props.items.length-1 : left-1);
 				}
 				
 				const goRight = () => {
-					setRight(right+1);
-					setLeft(left+1);
+					setRight(right == props.items.length-1 ? 0 : right+1);
+					setLeft(left == props.items.length-1 ? 0 : left+1);
 				}
 
         return (
@@ -47,15 +50,22 @@ export default function ItemCarousel (props) {
 						xs={12}
 						spacing={3}
 					>
-						<p onClick={goLeft}>ESQUERDA</p>	
-						<p onClick={goRight}>DIREITA</p>	
-						{props.items.slice(left, right).map((i) => {
+						<IconButton onClick={goLeft}>
+							<ArrowBackIcon/>
+						</IconButton>
+						{(left > right ?
+								props.items.slice(left, props.items.length).concat(props.items.slice(0, right))
+								: props.items.slice(left, right)
+							).map((i) => {
 							return <ItemCard
 								src={i.src}
 								action={i.action}
 								name={i.name}
 								description={i.description}/>
 						})}
+						<IconButton onClick={goRight}>
+							<ArrowForwardIcon/>
+						</IconButton>
 					</Grid>
         )
 }

src/Pages/ItemStore.js

@@ -28,9 +28,14 @@ import StoreGuide from '../Components/StoreGuide.js';
 import ItemCarousel from '../Components/ItemCarousel.js';
 import {apiUrl} from '../env';
 
-const StoreSection = styled.h2`
+const SectionTitle = styled.h3`
 	font-weight: 100;
 `
+const StoreSection = styled.div`
+	font-size: 1.5em;
+	margin-top: 20px;
+	margin-bottom: 20px;
+`
 
 export default function ItemStoreContainer (props) {
 				const [avatar_frames, setAvatarFrames] = useState([]);
@@ -59,8 +64,8 @@ export default function ItemStoreContainer (props) {
 						description: "Descrição | Descrição"
 					}
 				];
-				for (let i = 0; i < 6; i++)
-					items = items.concat(items);
+				for (let i = 0; i < 10; i++)
+					items = items.concat(items[0]);
 
         return (
 					<Container style={{paddingTop : "2em", backgroundColor : "#f4f4f4"}}>
@@ -77,19 +82,19 @@ export default function ItemStoreContainer (props) {
 							<StoreGuide/>
 						</Grid>
 						<StoreSection>
-							Bordas de avatar
+							<SectionTitle>Bordas de avatar</SectionTitle>
 							<ItemCarousel items={items}/>
 						</StoreSection>
 						<StoreSection>
-							Insígnias
+							<SectionTitle>Insígnias</SectionTitle>
 							<ItemCarousel items={items}/>
 						</StoreSection>
 						<StoreSection>
-							Bordas de card
+							<SectionTitle>Bordas de card</SectionTitle>
 							<ItemCarousel items={items}/>
 						</StoreSection>
 						<StoreSection>
-							Bordas de capa de perfil
+							<SectionTitle>Bordas de capa de perfil</SectionTitle>
 							<ItemCarousel items={items}/>
 						</StoreSection>
 					</Container>