diff --git a/package.json b/package.json
index 2639031..b3df43c 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
"web-vitals": "^0.2.2"
},
"scripts": {
- "start": "react-scripts start",
+ "start": "PORT=3300 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
diff --git a/public/balloons.jpg b/public/balloons.jpg
new file mode 100644
index 0000000..7d2e42c
Binary files /dev/null and b/public/balloons.jpg differ
diff --git a/public/balloons2.jpg b/public/balloons2.jpg
new file mode 100644
index 0000000..fb15757
Binary files /dev/null and b/public/balloons2.jpg differ
diff --git a/src/App.tsx b/src/App.tsx
index 4d1d279..030d92c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,38 +1,20 @@
-import * as React from "react"
-import {
- ChakraProvider,
- Box,
- Text,
- Link,
- VStack,
- Code,
- Grid,
- theme,
-} from "@chakra-ui/react"
-import { ColorModeSwitcher } from "./ColorModeSwitcher"
-import { Logo } from "./Logo"
+import * as React from 'react';
+import { ChakraProvider, Box, Grid, Container } from '@chakra-ui/react';
+import { CardGrid, Footer, Header } from './components';
+import customTheme from './extendTheme';
export const App = () => (
-
-
-
-
-
-
-
- Edit src/App.tsx and save to reload.
-
-
- Learn Chakra
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-)
+);
diff --git a/src/Logo.tsx b/src/Logo.tsx
deleted file mode 100644
index ba97a8f..0000000
--- a/src/Logo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from "react"
-import {
- chakra,
- keyframes,
- ImageProps,
- forwardRef,
- usePrefersReducedMotion,
-} from "@chakra-ui/react"
-import logo from "./logo.svg"
-
-const spin = keyframes`
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
-`
-
-export const Logo = forwardRef((props, ref) => {
- const prefersReducedMotion = usePrefersReducedMotion()
-
- const animation = prefersReducedMotion
- ? undefined
- : `${spin} infinite 20s linear`
-
- return
-})
diff --git a/src/app/data.ts b/src/app/data.ts
new file mode 100644
index 0000000..895ce5d
--- /dev/null
+++ b/src/app/data.ts
@@ -0,0 +1,52 @@
+import { Card } from './types';
+export const dummyData: Card[] = [
+ {
+ imageUrl: 'balloons',
+ imageAlt: 'Hot air balloons',
+ balloonCount: 'so many',
+ header: 'A short heading',
+ content:
+ 'The idea of reaching the North Pole by means of balloons appears to' +
+ 'have been entertained many years ago.',
+ badgeColor: 'gray',
+ badgeStatus: 'Default',
+ isFooter: true,
+ footerContent: 'I have a footer!',
+ },
+ {
+ imageUrl: 'balloons2',
+ imageAlt: 'Hot air balloons',
+ balloonCount: 1,
+ header: 'A short heading',
+ content: 'Short content.',
+ badgeColor: 'green',
+ badgeStatus: 'New',
+ isFooter: true,
+ footerContent: 'I have a footer!',
+ },
+ {
+ imageUrl: 'balloons',
+ imageAlt: 'Hot air balloons',
+ balloonCount: 'so many',
+ header: 'A longer heading in this card',
+ content:
+ 'In a curious work, published in Paris in 1863 by Delaville Dedreux,' +
+ 'there is a suggestion for reaching the North Pole by an aerostat.',
+ badgeColor: 'green',
+ badgeStatus: 'New',
+ isFooter: true,
+ footerContent: 'I have a footer!',
+ },
+ {
+ imageUrl: 'balloons2',
+ imageAlt: 'Hot air balloons',
+ balloonCount: 1,
+ header: 'A short heading',
+ content:
+ 'The idea of reaching the North Pole by means of balloons appears to' +
+ 'have been entertained many years ago.',
+ badgeColor: 'red',
+ badgeStatus: 'Removed',
+ isFooter: false,
+ },
+];
diff --git a/src/app/types.ts b/src/app/types.ts
new file mode 100644
index 0000000..5ebffdd
--- /dev/null
+++ b/src/app/types.ts
@@ -0,0 +1,11 @@
+export interface Card {
+ imageUrl: string;
+ imageAlt: string;
+ balloonCount: string | number;
+ header: string;
+ content: string;
+ badgeColor: string;
+ badgeStatus: string;
+ isFooter: boolean;
+ footerContent?: string;
+}
diff --git a/src/components/BreadCrumbNav.tsx b/src/components/BreadCrumbNav.tsx
new file mode 100644
index 0000000..932ebe9
--- /dev/null
+++ b/src/components/BreadCrumbNav.tsx
@@ -0,0 +1,35 @@
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react';
+
+import React from 'react';
+
+const links = ['Home', 'Category', 'Sub-Category', 'Products', 'Our Team'];
+
+function BreadcrumbLinks(crumbs: string[]) {
+ let breadcrumbNavLinks;
+ breadcrumbNavLinks = crumbs.map((crumb, index) => (
+
+
+ {crumb}
+
+
+ ));
+ return breadcrumbNavLinks;
+}
+
+function BreadCrumbNav() {
+ return (
+
+ {BreadcrumbLinks(links)}
+
+ );
+}
+
+export default BreadCrumbNav;
diff --git a/src/components/CardGrid.tsx b/src/components/CardGrid.tsx
new file mode 100644
index 0000000..f1f14a6
--- /dev/null
+++ b/src/components/CardGrid.tsx
@@ -0,0 +1,25 @@
+import { SimpleGrid } from '@chakra-ui/layout';
+import React from 'react';
+import CardItem from './CardItem';
+import { Card } from '../app/types';
+import { dummyData } from '../app/data';
+
+const items: Card[] = dummyData;
+
+function CardItems(cardProperties: Card[]) {
+ let cardItems;
+ cardItems = cardProperties.map((cardProperty: Card, index) => (
+
+ ));
+ return cardItems;
+}
+
+function CardGrid() {
+ return (
+
+ {CardItems(items)}
+
+ );
+}
+
+export default CardGrid;
diff --git a/src/components/CardItem.tsx b/src/components/CardItem.tsx
new file mode 100644
index 0000000..6c2d608
--- /dev/null
+++ b/src/components/CardItem.tsx
@@ -0,0 +1,68 @@
+import { Box, Heading, SimpleGrid } from '@chakra-ui/layout';
+import { Badge, Image } from '@chakra-ui/react';
+import React from 'react';
+import { Card } from '../app/types';
+
+function CardItem({ cardProperty }: { cardProperty: Card }) {
+ return (
+
+
+
+ {cardProperty.header}
+
+
+
+
+
+
+
+
+ {cardProperty.badgeStatus}
+
+
+
+ balloon: {cardProperty.balloonCount}
+
+
+
+
+ {cardProperty.content}
+
+
+
+ {cardProperty.footerContent}
+
+
+ );
+}
+
+export default CardItem;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..98bcf8a
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,12 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+function Footer() {
+ return (
+
+ Sticky footer
+
+ );
+}
+
+export default Footer;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..afc3ba1
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,56 @@
+import { Box, Flex, Stack } from '@chakra-ui/layout';
+import { HStack, Link, Spacer } from '@chakra-ui/react';
+import React from 'react';
+import { ColorModeSwitcher } from '../ColorModeSwitcher';
+
+import BreadCrumbNav from './BreadCrumbNav';
+
+const links = ['About', 'Products', 'Our Team'];
+
+function NavLinks(tabs: string[]) {
+ let navLinks;
+ navLinks = tabs.map((tab) => (
+
+ {tab}
+
+ ));
+ return navLinks;
+}
+
+function Header() {
+ return (
+
+
+ This is the header
+
+
+
+ );
+}
+
+export default Header;
diff --git a/src/components/index.tsx b/src/components/index.tsx
new file mode 100644
index 0000000..bf25f3a
--- /dev/null
+++ b/src/components/index.tsx
@@ -0,0 +1,5 @@
+export { default as BreadCrumbNav } from './BreadCrumbNav';
+export { default as CardGrid } from './CardGrid';
+export { default as CardItem } from './CardItem';
+export { default as Footer } from './Footer';
+export { default as Header } from './Header';
diff --git a/src/extendTheme.tsx b/src/extendTheme.tsx
new file mode 100644
index 0000000..23bd996
--- /dev/null
+++ b/src/extendTheme.tsx
@@ -0,0 +1,21 @@
+import { extendTheme } from '@chakra-ui/react';
+
+const customTheme = extendTheme({
+ colors: {
+ brand: {
+ 100: '#f7fafc',
+ // ...
+ 900: '#1a202c',
+ },
+ },
+ fonts: {
+ body: 'Helvetica Neue, Helvetica, Arial, sans-serif;',
+ },
+ textStyles: {
+ p: {
+ fontSize: '1.2em',
+ },
+ },
+});
+
+export default customTheme;
\ No newline at end of file
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 620fe26..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-