60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import Item from "../Item/Item";
|
|
import {
|
|
featuredOnly,
|
|
nonFeaturedOnly,
|
|
Item as mItem,
|
|
} from "../../model";
|
|
import "./item-list.scss";
|
|
|
|
type ItemListProps = {
|
|
items: mItem[];
|
|
activeItem?: mItem;
|
|
noLeadingBorder?: boolean;
|
|
headerStyle?: React.CSSProperties;
|
|
itemStyle?: React.CSSProperties[];
|
|
};
|
|
|
|
const ItemList: React.FC<ItemListProps> = ({
|
|
children,
|
|
items,
|
|
activeItem,
|
|
noLeadingBorder,
|
|
headerStyle = {},
|
|
itemStyle = [],
|
|
}) => {
|
|
const featuredItems = featuredOnly(items);
|
|
const nonFeaturedItems = nonFeaturedOnly(items);
|
|
|
|
return (
|
|
<div className="item-list">
|
|
<div className="item-list__header" style={headerStyle}>
|
|
{children}
|
|
</div>
|
|
<div className="item-list__list">
|
|
{featuredItems.map((item, i) => (
|
|
<Item
|
|
key={item.name}
|
|
item={item}
|
|
noLeadingBorder={noLeadingBorder}
|
|
active={activeItem?.name === item.name}
|
|
style={itemStyle[i]}
|
|
greyedOut={false}
|
|
/>
|
|
))}
|
|
{nonFeaturedItems.map((item, i) => (
|
|
<Item
|
|
key={item.name}
|
|
item={item}
|
|
noLeadingBorder={noLeadingBorder}
|
|
active={activeItem?.name === item.name}
|
|
style={itemStyle[featuredItems.length + i]}
|
|
greyedOut={true}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);}
|
|
|
|
export default ItemList;
|