init: the first public commit for AFFiNE

libs/components/ui/src/list/ListIcon.tsx

@@ -0,0 +1,12 @@
+import { styled } from '../styled';
+
+export const ListIcon = styled('div')(({ theme }) => {
+    return {
+        color: theme.affine.palette.icons,
+        height: '20px',
+
+        '& svg': {
+            fontSize: '20px',
+        },
+    };
+});

libs/components/ui/src/list/ListItem.tsx

@@ -0,0 +1,35 @@
+import type { FC, PropsWithChildren, CSSProperties } from 'react';
+import { Clickable } from '../clickable';
+import { styled } from '../styled';
+
+interface ListItemProps {
+    active?: boolean;
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+
+export const ListItem: FC<PropsWithChildren<ListItemProps>> = ({
+    active,
+    children,
+    onClick,
+    className,
+    style,
+}) => {
+    return (
+        <Container
+            active={active}
+            onClick={onClick}
+            className={className}
+            style={style}
+        >
+            {children}
+        </Container>
+    );
+};
+
+const Container = styled(Clickable)({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '6px 12px',
+});

libs/components/ui/src/list/index.ts

@@ -0,0 +1,2 @@
+export { ListItem } from './ListItem';
+export { ListIcon } from './ListIcon';