diff --git a/pages/guides/components/guide-grid-item.tsx b/pages/guides/components/guide-grid-item.tsx
new file mode 100644
index 000000000..834565a72
--- /dev/null
+++ b/pages/guides/components/guide-grid-item.tsx
@@ -0,0 +1,30 @@
+import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
+
+type GuideGridItemProps = {
+ title: string;
+ subtitle: string;
+ date: string;
+ isNew?: boolean;
+ colorIndex?: number;
+};
+
+const bgColorList = [
+ 'gray.700',
+ 'purple.800'
+];
+
+export function GuideGridItem(props: GuideGridItemProps) {
+ const { title, subtitle, date, isNew = false, colorIndex = 0 } = props;
+
+ return (
+
+
+ {isNew && New}
+ {date}
+
+ {title}
+ {subtitle}
+
+ );
+}
diff --git a/pages/guides/index.tsx b/pages/guides/index.tsx
index 70c16002d..7c428eef2 100644
--- a/pages/guides/index.tsx
+++ b/pages/guides/index.tsx
@@ -5,6 +5,7 @@ import { LinksListItem } from '../../components/links-list-item';
import { OpensourceBanner } from '../../components/opensource-banner';
import { UpdatesBanner } from '../../components/updates-banner';
import { Footer } from '../../components/footer';
+import { GuideGridItem } from './components/guide-grid-item';
export default function Guides() {
return (
@@ -17,28 +18,22 @@ export default function Guides() {
Succinct graphical explanations to development related topics.
-
- Recent Guides
- {/*Recent Guides*/}
- {/*Recent Guides*/}
+
-
- June 25, 2021
- Session Based Authentication
- Learn what the Session Based Authentication is, the pros and cons
- .
-
-
-
- June 25, 2021
- JSON Web Tokens
- Learn what the Session Based Authentication is, the pros and cons
- and how you can implement it in your
- apps.
-
+
+
- Past Guides