Created a Video component and updated the code with new component. (#180)

* Video component and update everywhere with it

* fixed an error with video component

* Added Vieo and difficult to MDXLayout file and updated Video name

* Add `youtube` prop to `VideoEmbed` component

* Run Prettier

Co-authored-by: Benoît Rouleau <benoit.rouleau@icloud.com>

Author: alexandriaroberts

components/VideoEmbed.tsx

@@ -0,0 +1,27 @@
+import { HTMLAttributes } from 'react'
+
+export type VideoProps = (
+  | {
+      /** Video embed URL. */
+      src: string
+      youtube?: never
+    }
+  | {
+      /** YouTube video ID. */
+      youtube: string
+      src?: never
+    }
+) &
+  HTMLAttributes<HTMLElement>
+
+export const VideoEmbed = ({ src, youtube, ...props }: VideoProps) => {
+  return (
+    <figure sx={{ paddingBottom: `${100 / (16 / 9)}%` }} {...props}>
+      <iframe
+        src={src ?? `https://www.youtube.com/embed/${youtube}`}
+        allowFullScreen
+        sx={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }}
+      />
+    </figure>
+  )
+}

components/index.ts

@@ -10,3 +10,4 @@ export * from './List'
 export * from './NavTree'
 export * from './Paragraph'
 export * from './Table'
+export * from './VideoEmbed'

layout/MDXLayout.tsx

@@ -26,6 +26,8 @@ import {
   ListUnordered,
   Paragraph,
   Table,
+  VideoEmbed,
+  Difficulty,
 } from '@/components'
 import { useI18n } from '@/i18n'
 import { NavItemGroup } from '@/navigation'
@@ -47,6 +49,8 @@ const mdxComponents = {
   ul: ListUnordered,
   p: Paragraph,
   table: Table,
+  VideoEmbed,
+  Difficulty,
 }
 
 const mdxStyles = {
@@ -56,16 +60,6 @@ const mdxStyles = {
     display: 'block',
     textAlign: 'center',
   },
-  '.video-container': {
-    paddingBottom: `${100 / (16 / 9)}%`,
-  },
-  '.video-iframe': {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    width: '100%',
-    height: '100%',
-  },
 } as ThemeUIStyleObject
 
 export type MDXLayoutProps = PropsWithChildren<

pages/ar/cookbook/migrating-a-subgraph.mdx

@@ -147,15 +147,7 @@ _بينما تتم هذه الآلية حاليا على الشبكة ، ينا
 
 إذا كنت لا تزال في حيرة من أمرك ، فلا تخف! راجع المصادر التالية أو شاهد الفيديو الخاص بنا حول ترحيل الـ subgraphs إلى الشبكة اللامركزية أدناه:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/CzdQ3dFFrjo"
-    title="مشغل فيديو يوتيوب"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<VideoEmbed youtube="CzdQ3dFFrjo" />
 
 - [عقود شبكة The Graph](https://github.com/graphprotocol/contracts)
 - [ عقد التنسيق](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - العقد الأساسي الذي تلتف حوله GNS

pages/ar/deploying/subgraph-studio.mdx

@@ -66,15 +66,7 @@ title: كيفية استخدام Subgraph Studio
 
 لقد نجحت في الوصول إلى هذا الحد - تهانينا! نشر الـ subgraph يعني أنه تم إنشاء IPFS hash عند نشرك لـ subgraph ضمن CLI وتخزينه في عقود Ethereum الذكية للشبكة. ولنشر الـ subgraph الخاص بك بنجاح ، ستحتاج إلى اتباع الخطوات التالية الموجزة في هذه [ المدونة ](https://thegraph.com/blog/building-with-subgraph-studio). راجع الفيديو أدناه أيضًا:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/HfDgC2oNnwo"
-    title="مشغل فيديو يوتيوب"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<VideoEmbed youtube="HfDgC2oNnwo" />
 
 تذكر ، أثناء تقدمك في تدفق النشر ، ستتمكن من الدفع(push) إما إلى mainnet أو Rinkeby ، وهي testnet التي ندعمها. إذا كنت مطور subgraph لأول مرة ، فنحن نقترح بشدة أن تبدأ بالنشر على Rinkeby ، وهو مجاني. سيسمح لك ذلك بمعرفة كيفية عمل الـ subgraph في The Graph Explorer وسيسمح لك باختبار عناصر التنسيق.
 

pages/ar/network/curating.mdx

@@ -93,12 +93,4 @@ title: (التنسيق) curating
 
 لازلت مشوشا؟ راجع فيديو دليل التنسيق أدناه:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/VytTEcf0dxQ"
-    title="مشغل فيديو يوتيوب"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<VideoEmbed youtube="VytTEcf0dxQ" />

pages/ar/network/delegating.mdx

@@ -91,12 +91,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p
 
 This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/2G7S2gdURdc"
-    title="مشغل فيديو يوتيوب"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<VideoEmbed youtube="2G7S2gdURdc" />

pages/ar/network/explorer.mdx

@@ -4,15 +4,7 @@ title: مستكشف
 
 مرحبا بك في مستكشف Graph ، أو كما نحب أن نسميها ، بوابتك اللامركزية في عالم subgraphs وبيانات الشبكة. 👩🏽‍🚀 مستكشف TheGraph يتكون من عدة اجزاء حيث يمكنك التفاعل مع مطوري Subgraphs الاخرين ، ومطوري dApp ،والمنسقين والمفهرسين، والمفوضين. للحصول على نظرة عامة حول the Graph Explorer، راجع الفيديو أدناه (أو تابع القراءة أدناه):
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/u224xf7rEBY"
-    title="مشغل فيديو يوتيوب"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<VideoEmbed youtube="u224xf7rEBY" />
 
 ## Subgraphs
 

pages/ar/network/indexing.mdx

@@ -2,8 +2,6 @@
 title: فهرسة (indexing)
 ---
 
-import { Difficulty } from '@/components'
-
 المفهرسون ( Indexers) هم مشغلي العقد (node) في شبكة TheGraph ويقومون ب staking لتوكن (GRT) من أجل توفير خدمات الفهرسة ( indexing) والاستعلام. المفهرسون(Indexers) يحصلون على رسوم الاستعلام ومكافآت الفهرسة وذلك مقابل خدماتهم. وأيضا يكسبون من مجموعة الخصومات (Rebate Pool) والتي تتم مشاركتها مع جميع المساهمين في الشبكة بما يتناسب مع عملهم ، وفقا ل Cobbs-Douglas Rebate Function.
 
 يخضع GRT المخزن في البروتوكول لفترة إذابة thawing period وقد يتم شطبه إذا كان المفهرسون ضارون ويقدمون بيانات غير صحيحة للتطبيقات أو إذا قاموا بالفهرسة بشكل غير صحيح. المفهرسون يتم تفويضهم من قبل المفوضين وذلك للمساهمه في الشبكة.

pages/ar/querying/billing.mdx

@@ -39,15 +39,7 @@ title: الفوترة على Subgraph Studio
 
 للحصول على عرض توضيحي سريع لكيفية عمل الفوترة في Subgraph Studio ، راجع الفيديو أدناه:
 
-<figure className="video-container">
-  <iframe
-    className="video-iframe"
-    src="https://www.youtube.com/embed/UrfIpm-Vlgs"
-    title="مشغل فيديو يوتيوب"
-    frameBorder="0"
-    allowFullScreen
-  ></iframe>
-</figure>
+<VideoEmbed youtube="UrfIpm-Vlgs" />
 
 ### مستخدمو Multisig