Added Octicons to Copilot Landing page (#53122)

Co-authored-by: Hector Alfaro <hectorsector@github.com>

src/landings/components/CookBookArticleCard.tsx

@@ -1,9 +1,37 @@
 import { Label, LabelGroup, Link } from '@primer/react'
-import { BugIcon } from '@primer/octicons-react'
+import {
+  BugIcon,
+  LightBulbIcon,
+  CodeIcon,
+  GearIcon,
+  RocketIcon,
+  BeakerIcon,
+  CopilotIcon,
+  HubotIcon,
+  LogIcon,
+  TerminalIcon,
+  BookIcon,
+} from '@primer/octicons-react'
+
+const Icons = {
+  bug: BugIcon,
+  lightbulb: LightBulbIcon,
+  code: CodeIcon,
+  gear: GearIcon,
+  rocket: RocketIcon,
+  beaker: BeakerIcon,
+  copilot: CopilotIcon,
+  hubot: HubotIcon,
+  log: LogIcon,
+  terminal: TerminalIcon,
+  book: BookIcon,
+}
+
+type IconType = keyof typeof Icons
 
 type Props = {
   title?: string
-  icon?: string
+  icon?: IconType
   url?: string
   description?: string
   tags?: string[]
@@ -17,18 +45,7 @@ const defaultProps = {
   description:
     'Man bun letterpress put a bird on it la croix offal, meh grailed hot chicken kombucha gochujang messenger bag fit before they sold out lyft.',
   tags: ['Tag Example', 'Tag Example'],
-  icon: 'bugicon',
-}
-
-function setIcon(icon: string) {
-  switch (icon) {
-    case 'bugicon':
-      return <BugIcon size={48} className="mr-4 bgColor-accent-muted p-3 circle fgColor-accent" />
-    case 'none':
-      return null
-    default:
-      return null
-  }
+  icon: 'book',
 }
 
 function setImage(image: string) {
@@ -51,13 +68,18 @@ function setImage(image: string) {
 const spotlightClasses = 'd-flex flex-column align-items-center'
 export const CookBookArticleCard = ({
   title = defaultProps.title,
-  icon = defaultProps.icon,
+  icon = defaultProps.icon as IconType,
   tags = defaultProps.tags,
   description = defaultProps.description,
   image = '',
   url,
   spotlight = false,
 }: Props) => {
+  const setIcon = (icon: keyof typeof Icons) => {
+    return Icons[icon] || CopilotIcon
+  }
+
+  const IconComponent = setIcon(icon as keyof typeof Icons)
   return (
     <div className="m-2">
       <div
@@ -65,7 +87,14 @@ export const CookBookArticleCard = ({
         className={spotlight ? spotlightClasses : 'd-flex pb-3 border-bottom'}
       >
         {spotlight ? setImage(image) : null}
-        {spotlight ? setIcon('none') : setIcon(icon)}
+        {spotlight
+          ? null
+          : IconComponent && (
+              <IconComponent
+                size={48}
+                className="mr-4 bgColor-accent-muted p-3 circle fgColor-accent"
+              />
+            )}
         <div>
           <Link href={url}>
             <h3 className="h4">{title}</h3>

src/landings/types.ts

@@ -5,7 +5,18 @@ export type BaseTocItem = {
 }
 
 export type ChildTocItem = BaseTocItem & {
-  octicon?: string
+  octicon?:
+    | 'code'
+    | 'log'
+    | 'terminal'
+    | 'bug'
+    | 'lightbulb'
+    | 'gear'
+    | 'rocket'
+    | 'beaker'
+    | 'copilot'
+    | 'hubot'
+    | 'book'
   category?: string[]
   complexity?: string[]
   industry?: string[]