mirror of
https://github.com/iconoir-icons/iconoir
synced 2024-06-26 17:30:16 +02:00
75effa75c8
* add: new footer and logo hover effect * fix: footer links * Fix: Footer privacy url, header links and animations, small additional changes * Update iconoir.com/components/Footer.tsx Co-authored-by: Sam Marks <sam@sammarks.me> * fix: fixes on pull-request --------- Co-authored-by: Sam Marks <sam@sammarks.me>
56 lines
1.1 KiB
TypeScript
56 lines
1.1 KiB
TypeScript
import styled from 'styled-components';
|
|
import { media } from '../lib/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);
|
|
background-color: var(--light-gray);
|
|
border-radius: 8px;
|
|
padding: 6px 10px;
|
|
`;
|
|
const Separator = styled.div`
|
|
height: 1px;
|
|
flex: 1;
|
|
background: var(--light-gray);
|
|
`;
|