Adding index.tsx with the third party components

packages/third-parties/README.md

@@ -0,0 +1,51 @@
+# `@next/third-parties`
+
+`@next/third-parties` is collection of components that can be used to efficiently load third party libraries into your Next.js application.
+This package is the Next.js implementation of the [Third Party Capital](https://github.com/GoogleChromeLabs/third-party-capital/) loading recommendations.
+
+# Usage
+
+## Google Analytics
+
+The `GoogleAnalytics` component loads a Google Analytics 4 tag into the page and off-loaded the execution to a web worker using Partytown. This includes the 83 kB gtag script that is required.
+
+```js
+import { GoogleAnalytics } from '@next/third-parties'
+
+export default function Page() {
+  return <GoogleAnalytics id="G-7GY583TNN9" />
+}
+```
+
+## Youtube Embed
+
+The `YoutubeEmbed` component is used to load and display a Youtube embed. This component loads approximately 224× faster by using [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) under the hood.
+
+```js
+import { YoutubeEmbed } from '@next/third-parties'
+
+export default function Page() {
+  return <YoutubeEmbed videoid="ogfYd705cRs" height={400} />
+}
+```
+
+## Google Maps Embed
+
+The `GoogleMapsEmbed` component can be used to lazy load a Google Maps Embed using the loading attribute.
+
+```js
+import { GoogleMapsEmbed } from '@next/third-parties'
+
+export default function Page() {
+  return (
+    <GoogleMapsEmbed
+      height={200}
+      width="100%"
+      mapMode="place"
+      parameters="q=Brooklyn+Bridge,New+York,NY"
+    />
+  )
+}
+```
+
+Check out the [demo](https://test-next-script-housseindjirdeh.vercel.app/)

packages/third-parties/src/index.tsx

@@ -0,0 +1,56 @@
+/**
+ * This is an autogenerated file by update-third-parties.js
+ */
+import React from 'react'
+import Script from 'next/script'
+
+import Base from './base'
+
+// Install a Google Analytics tag on your website
+export function GoogleAnalytics(args: any) {
+  return (
+    <Base>
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${args.id}`}
+        strategy="worker"
+      />
+      <Script
+        id="google-analytics"
+        strategy="worker"
+        dangerouslySetInnerHTML={{
+          __html: `window.dataLayer=window.dataLayer||[];window.gtag=function gtag(){window.dataLayer.push(arguments);};gtag('js',new Date());gtag('config','${args.id}')`,
+        }}
+      />
+    </Base>
+  )
+}
+
+// Embed a Google Maps embed on your webpage
+export function GoogleMapsEmbed(args: any) {
+  return (
+    <Base
+      height={args.height || null}
+      width={args.width || null}
+      content={`<iframe loading="lazy" src="https://www.google.com/maps/embed/v1/${args.mapMode}?key=${args.apiKey}&${args.parameters}" width=${args.width} height=${args.height} style=${args.style} loading=${args.loading} allowfullscreen=${args.allowfullscreen} referrerpolicy="no-referrer-when-downgrade"></iframe>`}
+    ></Base>
+  )
+}
+
+// Embed a YouTube embed on your webpage.
+export function YoutubeEmbed(args: any) {
+  return (
+    <Base
+      height={args.height || null}
+      width={args.width || null}
+      content={`<lite-youtube videoid=${args.videoid} playlabel=${args.playlabel}></lite-youtube>`}
+    >
+      <Script
+        src={`https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.js`}
+        strategy="lazyOnload"
+        stylesheets={[
+          'https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.css',
+        ]}
+      />
+    </Base>
+  )
+}