Add resource group

pull/1657/head
Kamran Ahmed 3 years ago
parent 1bb2f62ee7
commit e6da495327
  1. 2
      components/md-renderer/mdx-components/index.tsx
  2. 12
      components/md-renderer/mdx-components/resource-group-title.tsx
  3. 1
      content/roadmaps/100-frontend/content/100-internet/readme.md

@ -10,6 +10,7 @@ import EnrichedLink from './a';
import { BadgeLink } from './badge-link'; import { BadgeLink } from './badge-link';
import { Li, Ul } from './ul'; import { Li, Ul } from './ul';
import PremiumBlock from './premium-block'; import PremiumBlock from './premium-block';
import { ResourceGroupTitle } from './resource-group-title';
const MdxComponents = { const MdxComponents = {
p: P, p: P,
@ -22,6 +23,7 @@ const MdxComponents = {
img: Img, img: Img,
code: Code, code: Code,
BadgeLink: BadgeLink, BadgeLink: BadgeLink,
ResourceGroupTitle: ResourceGroupTitle,
PremiumBlock: PremiumBlock, PremiumBlock: PremiumBlock,
ul: Ul, ul: Ul,
li: Li li: Li

@ -0,0 +1,12 @@
import React from 'react';
import { Heading } from '@chakra-ui/react';
type ResourceGroupTitleProps = {
children: React.ReactNode;
};
export function ResourceGroupTitle(props: ResourceGroupTitleProps) {
const { children } = props;
return <Heading fontSize='22px' as="h2" mb={'10px'}>{children}</Heading>;
}

@ -2,6 +2,7 @@
The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols. The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
<ResourceGroupTitle>Free Content</ResourceGroupTitle>
<BadgeLink badgeText='Watch' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink> <BadgeLink badgeText='Watch' href='/guides/what-is-internet'>Introduction to Internet</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x3c1ih2NJEg'>How does the Internet work?</BadgeLink> <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x3c1ih2NJEg'>How does the Internet work?</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink> <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>

Loading…
Cancel
Save