36 lines
831 B
TypeScript
36 lines
831 B
TypeScript
|
import React from "react";
|
||
|
|
import styled from "styled-components";
|
||
|
|
import { App, IAppProps } from "./app";
|
||
|
|
import { ItemList, Item, SubHeadline } from "./elements";
|
||
|
|
|
||
|
|
const CategoryHeadline = styled(SubHeadline)`
|
||
|
|
padding-top: 1rem;
|
||
|
|
`;
|
||
|
|
|
||
|
|
const CategoryContainer = styled.div`
|
||
|
|
width: 100%;
|
||
|
|
`;
|
||
|
|
|
||
|
|
interface IAppCategoryProps {
|
||
|
|
name: string;
|
||
|
|
items: Array<IAppProps>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const AppCategory = ({ name, items }: IAppCategoryProps) => (
|
||
|
|
<CategoryContainer>
|
||
|
|
{name && <CategoryHeadline>{name}</CategoryHeadline>}
|
||
|
|
<ItemList>
|
||
|
|
{items.map((app, idx) => (
|
||
|
|
<Item key={[app.name, idx].join("")}>
|
||
|
|
<App
|
||
|
|
name={app.name}
|
||
|
|
icon={app.icon}
|
||
|
|
url={app.url}
|
||
|
|
displayURL={app.displayURL}
|
||
|
|
/>
|
||
|
|
</Item>
|
||
|
|
))}
|
||
|
|
</ItemList>
|
||
|
|
</CategoryContainer>
|
||
|
|
);
|