From bc832c96c697382977ec842655b8df27734347fe Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Tue, 1 Oct 2024 09:14:10 +0200
Subject: [PATCH] adding FigmaImage component

---
 content/FigmaImageSources.json |  3 +++
 content/components/avatar.mdx  |  3 ++-
 src/components/figma-image.tsx | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 content/FigmaImageSources.json
 create mode 100644 src/components/figma-image.tsx

diff --git a/content/FigmaImageSources.json b/content/FigmaImageSources.json
new file mode 100644
index 000000000..3f5ecfd5d
--- /dev/null
+++ b/content/FigmaImageSources.json
@@ -0,0 +1,3 @@
+{
+  "https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=26998-2424&t=eruKCwLaYv3FX2Vu-4": "https://user-images.githubusercontent.com/97200987/176713532-b80d0221-fc01-4bbc-bb5d-0a152bf127d2.png"
+}
diff --git a/content/components/avatar.mdx b/content/components/avatar.mdx
index 99d7c8815..b64659717 100644
--- a/content/components/avatar.mdx
+++ b/content/components/avatar.mdx
@@ -13,6 +13,7 @@ import {Box, Text} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
 import {AccessibilityLink} from '~/src/components/accessibility-link'
+import {FigmaImage} from '~/src/components/FigmaImage'
 
 <img
   width="960"
@@ -37,7 +38,7 @@ Avatars start at 16px and increment by base-4 until 32px. At 32px, the scale swi
   src="https://user-images.githubusercontent.com/586552/207139770-429f7327-c3e5-4e38-aa58-185a03d82304.png"
 />
 
-<img
+<FigmaImage
   width="960"
   alt="Demo"
   src="https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=26998-2424&t=eruKCwLaYv3FX2Vu-4"
diff --git a/src/components/figma-image.tsx b/src/components/figma-image.tsx
new file mode 100644
index 000000000..d53d5d098
--- /dev/null
+++ b/src/components/figma-image.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import Images from '../../content/FigmaImageSources.json';
+
+
+type FigmaImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+  src: string
+}
+
+export const FigmaImage: React.FC<FigmaImageProps> = ({src, ...props}) => {
+  // check for missing prop
+  if(src === undefined) throw new Error("src is required on FigmaImage component");
+  // get real image url
+  const realImageSrc = Images[src]
+  if (realImageSrc === undefined) throw new Error(`Image with src ${src} not found in FigmaImageSources.json`);
+  // return image component
+  return (<img src={realImageSrc} {...props}/>)
+}
\ No newline at end of file