added spotlight images to copilot landing page (#53245)

Co-authored-by: Hector Alfaro <[email protected]>
github · Nov 22, 2024 · 5be4cec · 5be4cec
1 parent dacb262
commit 5be4cec
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 39 deletions.
diff --git a/assets/images/copilot-landing/debugging_invalid_json.png b/assets/images/copilot-landing/debugging_invalid_json.png
diff --git a/assets/images/copilot-landing/generating_unit_tests.png b/assets/images/copilot-landing/generating_unit_tests.png
diff --git a/assets/images/copilot-landing/improving_code_readability.png b/assets/images/copilot-landing/improving_code_readability.png
diff --git a/src/landings/components/CategoryLanding.tsx b/src/landings/components/CategoryLanding.tsx
@@ -85,10 +85,37 @@ export const CategoryLanding = () => {
         {intro && <Lead data-search="lead">{intro}</Lead>}
 
         <h2 className="py-5">Spotlight</h2>
-        <div className="d-md-flex d-sm-block">
-          <CookBookArticleCard image="DeleteMe" spotlight={true} url="#" />
-          <CookBookArticleCard image="DeleteMe" spotlight={true} url="#" />
-          <CookBookArticleCard image="DeleteMe" spotlight={true} url="#" />
+        <div className="d-md-flex d-sm-block col-md-12">
+          <div className="col-md-4">
+            <CookBookArticleCard
+              image={'/assets/images/copilot-landing/generating_unit_tests.png'}
+              title="Generate unit tests"
+              description="Copilot Chat can help with generating unit tests for a function."
+              spotlight={true}
+              url="/en/copilot/example-prompts-for-github-copilot-chat/testing-code/generate-unit-tests"
+              tags={[]}
+            />
+          </div>
+          <div className="col-md-4">
+            <CookBookArticleCard
+              image={'/assets/images/copilot-landing/improving_code_readability.png'}
+              title="Improving code readability and maintainability"
+              description="Learn how to improve your code readability and maintainability."
+              spotlight={true}
+              url="/en/copilot/example-prompts-for-github-copilot-chat/refactoring-code/improving-code-readability-and-maintainability"
+              tags={[]}
+            />
+          </div>
+          <div className="col-md-4">
+            <CookBookArticleCard
+              image={'/assets/images/copilot-landing/debugging_invalid_json.png'}
+              title="Debugging invalid JSON"
+              description="Copilot can identify and resolve syntax errors or structural issues in JSON data."
+              spotlight={true}
+              tags={[]}
+              url="/en/copilot/example-prompts-for-github-copilot-chat/debugging-errors/debugging-invalid-json"
+            />
+          </div>
         </div>
 
         <div className="pt-8">
@@ -110,7 +137,7 @@ export const CategoryLanding = () => {
               <li key={index} className="col-md-4 col-sm-12 list-style-none float-left p-4">
                 <CookBookArticleCard
                   title={item.title}
-                  description={item.intro}
+                  description={item.intro!}
                   icon={item.octicon}
                   tags={[
                     ...(item.industry || []),

diff --git a/src/landings/components/CookBookArticleCard.tsx b/src/landings/components/CookBookArticleCard.tsx
@@ -30,47 +30,37 @@ const Icons = {
 type IconType = keyof typeof Icons
 
 type Props = {
-  title?: string
+  title: string
   icon?: IconType
-  url?: string
-  description?: string
-  tags?: string[]
+  url: string
+  description: string
+  tags: string[]
   spotlight?: boolean
   image?: string
   complexity?: string
 }
 
-const defaultProps = {
-  title: 'Article Name',
-  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: 'book',
-}
-
-function setImage(image: string) {
-  return (
-    // <div className="d-flex flex-column flex-align-center">
-    image ? (
-      <div
-        style={{
-          width: 'max-width',
-          height: 200,
-          backgroundColor: 'gray',
-          marginBottom: 20,
-          borderRadius: 5,
-        }}
-      ></div>
-    ) : null
-    // </div>
-  )
+function setImage(image: string, alt: string) {
+  return image ? (
+    <img
+      src={image}
+      alt={alt}
+      style={{
+        backgroundColor: 'gray',
+        marginBottom: 20,
+        borderRadius: 5,
+        width: '100%',
+        height: 'auto',
+      }}
+    />
+  ) : null
 }
 const spotlightClasses = 'd-flex flex-column align-items-center'
 export const CookBookArticleCard = ({
-  title = defaultProps.title,
-  icon = defaultProps.icon as IconType,
-  tags = defaultProps.tags,
-  description = defaultProps.description,
+  title,
+  icon,
+  tags,
+  description,
   image = '',
   url,
   spotlight = false,
@@ -86,7 +76,7 @@ export const CookBookArticleCard = ({
         style={{ minHeight: 200 }}
         className={spotlight ? spotlightClasses : 'd-flex pb-3 border-bottom'}
       >
-        {spotlight ? setImage(image) : null}
+        {spotlight ? setImage(image, title) : null}
         {spotlight
           ? null
           : IconComponent && (
@@ -104,7 +94,7 @@ export const CookBookArticleCard = ({
             {tags.map((tag, index) => (
               <Label key={index} variant="accent" sx={{ mr: 1 }} size="small">
                 {tag}
-              </Label> //fix this to have unique keys
+              </Label>
             ))}
           </LabelGroup>
         </div>