feat: add Card

dist/components/Card/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default _default;

dist/index.d.ts

@@ -11,6 +11,8 @@ export { default as ActionBarMenu } from "./components/ActionBarMenu/index";
 export { default as ActionBarSpace } from "./components/ActionBarSpace/index";
 export { default as StatuBar } from "./components/StatuBar/index";
 export { default as SearchBar } from "./components/SearchBar/index";
+export { default as Card } from "./components/Card/index";
+export { default as CogSharpIcon } from "./icons/cog-sharp.svg";
 export { default as AirplaneIcon } from "./icons/airplane.svg";
 export { default as HomeOutlineIcon } from "./icons/home-outline.svg";
 export { default as WifiSharpIcon } from "./icons/wifi-sharp.svg";

playground/src/App.js

@@ -3,7 +3,6 @@ import {
 	BrowserRouter as Router,
 	Switch,
 	Route,
-	Link,
 	useHistory,
 } from "react-router-dom";
 import { Container } from "kindyle";
@@ -12,7 +11,6 @@ import Setting from "./page/setting";
 import Header from "./components/Header.jsx";
 
 const Main = () => {
-	let history = useHistory();
 	return (
 		<>
 			<Header />

playground/src/components/Header.jsx

@@ -9,25 +9,35 @@ import {
 	ActionBar,
 	ActionBarMenu,
 	HomeOutlineIcon,
+	CogSharpIcon
 } from "kindyle";
 import React from "react";
+import {
+	useHistory,
+} from "react-router-dom";
 
 export default () => {
+	let history = useHistory();
+
 	return (
 		<Navbar>
 			<StatuBar battery={86} deviceName="My Kindle" />
 			<ActionBar>
 				<ActionGroup>
-					<ActionItem>
+					<ActionItem onClick={()=>{
+						history.push('/')
+					}}>
 						<HomeOutlineIcon />
 						home
 					</ActionItem>
-					<ActionItem>
+					<ActionItem onClick={()=>{
+						history.goBack()
+					}}>
 						<ArrowBackSharpIcon />
 						BACK
 					</ActionItem>
 					<ActionItem>
-						<HomeOutlineIcon />
+						<CogSharpIcon />
 						settings
 					</ActionItem>
 				</ActionGroup>

playground/src/page/home.jsx

@@ -1,4 +1,4 @@
-import { Typography, Button, ListItem, Dialog } from "kindyle";
+import { Typography, Button, ListItem, Card } from "kindyle";
 
 export default () => {
 	return (
@@ -25,7 +25,8 @@ export default () => {
 					second="Arthur Conan Doyle"
 				></ListItem>
 				<ListItem primary="尘埃落定" second="阿来著"></ListItem>
-				<h2>Dialog</h2>
+				<h2>Card</h2>
+				<Card>asdfkhjf</Card>
 			</Typography>
 		</>
 	);

src/components/ActionBar/index.tsx

@@ -3,4 +3,5 @@ import styled from "styled-components";
 export default styled.div`
 	display: flex;
 	height: 50px;
+	padding: 2px 0;
 `;

src/components/Card/index.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
 export default styled.div`
-	flex: 2 4 auto;
-	width: 10px;
+	border: 3px solid #000;
+	border-radius: 7px;
 `;

src/index.ts

@@ -11,7 +11,9 @@ export { default as ActionBarMenu } from "./components/ActionBarMenu/index";
 export { default as ActionBarSpace } from "./components/ActionBarSpace/index";
 export { default as StatuBar } from "./components/StatuBar/index";
 export { default as SearchBar } from "./components/SearchBar/index";
+export { default as Card } from "./components/Card/index";
 
+export { default as CogSharpIcon } from "./icons/cog-sharp.svg";
 export { default as AirplaneIcon } from "./icons/airplane.svg";
 export { default as HomeOutlineIcon } from "./icons/home-outline.svg";
 export { default as WifiSharpIcon } from "./icons/wifi-sharp.svg";