diff --git a/package.json b/package.json
index 27cc025..95a553f 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
"web-vitals": "^1.1.1"
},
"scripts": {
- "start": "react-scripts --max_old_space_size=4096 start",
+ "start": "react-scripts --max_old_space_size=2000 start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
diff --git a/src/components/dogcard.js b/src/components/dogcard.js
new file mode 100644
index 0000000..b36b06f
--- /dev/null
+++ b/src/components/dogcard.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Card } from 'antd';
+import PostIcon from './dogicon';
+import NavImage from './navimage'
+
+const { Meta } = Card;
+
+class DogCard extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.handleNav = this.handleNav.bind(this);
+ }
+
+ handleNav() {
+ console.log(`clicked post ${this.props.id}`);
+ }
+
+ render() {
+ const dogID = this.props.id;
+ return (
+ }
+ hoverable={true}
+ actions={[
+ ,
+
+ ]}>
+
+
+ );
+ }
+}
+
+export default DogCard;
\ No newline at end of file
diff --git a/src/components/doggrid.js b/src/components/doggrid.js
new file mode 100644
index 0000000..595ee8b
--- /dev/null
+++ b/src/components/doggrid.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Col, Row } from 'antd';
+import DogCard from './dogcard';
+
+class BlogGrid extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ posts: []
+ }
+ }
+
+ componentDidMount() {
+ this.setState({
+ posts: require('../data/dogs.json')
+ })
+ }
+
+ render() {
+ if (!this.state.posts.length) {
+ return
Loading posts...
+ }
+ const cardList = this.state.posts.map(post => {
+ return (
+
+
+
+
+
+ )
+ });
+ return (
+
+ {cardList}
+
+ );
+ }
+}
+
+export default BlogGrid;
\ No newline at end of file
diff --git a/src/components/dogicon.js b/src/components/dogicon.js
new file mode 100644
index 0000000..103269f
--- /dev/null
+++ b/src/components/dogicon.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { EditOutlined, EditFilled, HeartOutlined, HeartFilled} from "@ant-design/icons";
+
+function getIcon (theme, iconType) {
+ let Icon;
+
+ if (theme === 'filled') {
+ if (iconType === 'edit') {
+ Icon = EditFilled
+ } else if (iconType === 'heart') {
+ Icon = HeartFilled
+ }
+ } else if (theme === 'outlined') {
+ if (iconType === 'edit') {
+ Icon = EditOutlined
+ } else if (iconType === 'heart') {
+ Icon = HeartOutlined
+ }
+ }
+
+ return Icon;
+}
+
+class PostIcon extends React.Component {
+ constructor(props){
+ super(props);
+ this.state = {
+ selected: props.selected
+ };
+ this.onClick = this.onClick.bind(this);
+ }
+
+ onClick(){
+ //reverse the selected state with every click
+ this.setState({selected: !this.state.selected});
+ }
+
+ render(){
+ const theme = this.state.selected ? 'filled' : 'outlined';
+ const iconType = this.props.type;
+ const Icon = getIcon(theme, iconType);
+
+ return (
+
+
+ {this.props.count}
+
+ );
+ }
+}
+
+export default PostIcon;
\ No newline at end of file
diff --git a/src/components/home.js b/src/components/home.js
index c826717..2b351d2 100644
--- a/src/components/home.js
+++ b/src/components/home.js
@@ -1,56 +1,11 @@
-import { Card, Row, Col } from 'antd';
-import { Link } from 'react-router-dom';
-const { Meta } = Card;
+import DogGrid from './doggrid'
function Home(props) {
return (
<>
-
-
-
- }>
-
-
-
-
-
-
- }>
-
-
-
-
-
-
- }>
-
-
-
-
-
-
-
-
- }>
-
-
-
-
-
-
- }>
-
-
-
-
-
-
- }>
-
-
-
-
-
+
+
+
>
);
}
diff --git a/src/components/navimage.js b/src/components/navimage.js
new file mode 100644
index 0000000..843c9c2
--- /dev/null
+++ b/src/components/navimage.js
@@ -0,0 +1,12 @@
+/**
+ * Wrap an image tag as a React component to allow router linking.
+ */
+
+ import React from 'react';
+ import { useHistory } from 'react-router-dom';
+
+ const NavImage = (props) => {
+ const history = useHistory();
+ return history.push(props.to)} />;
+ }
+ export default NavImage;
\ No newline at end of file
diff --git a/src/data/dogs.json b/src/data/dogs.json
new file mode 100644
index 0000000..f0dac05
--- /dev/null
+++ b/src/data/dogs.json
@@ -0,0 +1,71 @@
+[{
+ "id": 1,
+ "Name": "dog1",
+ "Breed": "some desription about the article",
+ "Age": "4",
+ "about": "dog description",
+ "imgURL": "https://picsum.photos/id/1025/400",
+ "heart": false,
+ "edit": false
+},
+{
+ "id": 2,
+ "Name": "dog2",
+ "Breed": "some desription about the article",
+ "Age": "4",
+ "about": "dog description",
+ "imgURL": "https://picsum.photos/id/1025/400",
+ "heart": false,
+ "edit": false
+},
+{
+ "id": 3,
+ "Name": "dog3",
+ "Breed": "some desription about the article",
+ "Age": "4",
+ "about": "dog description",
+ "imgURL": "https://picsum.photos/id/1025/400",
+ "heart": false,
+ "edit": false
+},
+{
+ "id": 4,
+ "Name": "dog4",
+ "Breed": "some desription about the article",
+ "Age": "4",
+ "about": "dog description",
+ "imgURL": "https://picsum.photos/id/1025/400",
+ "heart": false,
+ "edit": false
+},
+{
+ "id": 5,
+ "Name": "dog5",
+ "Breed": "some desription about the article",
+ "Age": "4",
+ "about": "dog description",
+ "imgURL": "https://picsum.photos/id/1025/400",
+ "heart": false,
+ "edit": false
+},
+{
+ "id": 6,
+ "Name": "dog6",
+ "Breed": "some desription about the article",
+ "Age": "4",
+ "about": "dog description",
+ "imgURL": "https://picsum.photos/id/1025/400",
+ "heart": false,
+ "edit": false
+},
+{
+ "id": 7,
+ "Name": "dog7",
+ "Breed": "some desription about the article",
+ "Age": "4",
+ "about": "dog description",
+ "imgURL": "https://picsum.photos/id/1025/400",
+ "heart": false,
+ "edit": false
+}
+]
\ No newline at end of file