import * as React from 'react';
import Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Avatar: React.FC<{}> = ({ children }) => {
return (
{children}
);
};
const Details: React.FC<{}> = () => {
return (
...
`}
css={`
.avatars {
display: flex;
}
.avatars__item {
/* Nagative margin make avatar overlap to previous one */
margin-left: -4px;
}
.avatars__image {
/* Add a white curve between avatars */
box-shadow: 0 0 0 4px #fff;
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Rounded border */
border-radius: 9999px;
}
`}
>
);
};
export default Details;