mirror of
https://github.com/iconoir-icons/iconoir
synced 2024-06-27 01:40:07 +02:00
54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import { media } from './responsive';
|
|
import { Text15 } from './Typography';
|
|
|
|
export interface CategoryRowProps {
|
|
category: string;
|
|
numIcons: number;
|
|
style?: any;
|
|
}
|
|
export function CategoryRow({ category, numIcons, style }: CategoryRowProps) {
|
|
return (
|
|
<Container style={style}>
|
|
<InnerContainer>
|
|
<Title>{category}</Title>
|
|
<Text15>
|
|
{numIcons} Icon{numIcons === 1 ? '' : 's'}
|
|
</Text15>
|
|
<Separator />
|
|
</InnerContainer>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
const InnerContainer = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
* {
|
|
line-height: 1;
|
|
}
|
|
> :not(:last-child) {
|
|
margin-right: 10px;
|
|
}
|
|
`;
|
|
const Container = styled.div`
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding-bottom: 25px;
|
|
box-sizing: border-box;
|
|
${media.sm} {
|
|
padding-bottom: 40px;
|
|
}
|
|
`;
|
|
const Title = styled(Text15)`
|
|
font-weight: 700;
|
|
color: var(--black);
|
|
`;
|
|
const Separator = styled.div`
|
|
height: 1px;
|
|
flex: 1;
|
|
background: var(--light-gray);
|
|
`;
|