Feat/add screenshot og image variant (#6138)

* Added screenshot variant of og image (used in website).

* Added option to rotate background image in og image.

* Converted wrapper props to interface instead of inline type declaration.

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

packages/lib/OgImages.tsx

@@ -26,6 +26,16 @@ export interface GenericImageProps {
   description: string;
 }
 
+export interface ScreenshotImageProps {
+  image: string;
+}
+
+interface WrapperProps {
+  children: React.ReactNode;
+  variant?: "light" | "dark";
+  rotateBackground?: boolean;
+}
+
 const joinMultipleNames = (names: string[] = []) => {
   const lastName = names.pop();
   return `${names.length > 0 ? `${names.join(", ")} & ${lastName}` : lastName}`;
@@ -83,16 +93,11 @@ export const constructGenericImage = ({ title, description }: GenericImageProps,
   return encodeUri ? encodeURIComponent(url) : url;
 };
 
-const Wrapper = ({
-  children,
-  variant = "light",
-}: {
-  children: React.ReactNode;
-  variant?: "light" | "dark";
-}) => (
+const Wrapper = ({ children, variant = "light", rotateBackground }: WrapperProps) => (
   <div tw="flex w-full h-full">
     <img
       tw="flex absolute left-0 top-0 w-full h-[110%]"
+      style={rotateBackground ? { transform: "rotate(180deg)" } : undefined}
       src={`${CAL_URL}/social-bg-${variant}-lines.jpg`}
       alt="background"
       width="1200"
@@ -236,3 +241,18 @@ export const Generic = ({ title, description }: GenericImageProps) => (
     </div>
   </Wrapper>
 );
+
+export const ScreenShot = ({ image }: ScreenshotImageProps) => (
+  <Wrapper rotateBackground>
+    <div tw="h-full w-full flex flex-col justify-center items-center">
+      <img
+        src={image}
+        width="1024"
+        height="576"
+        alt="screenshot"
+        tw="rounded-2xl mt-[140px] object-cover"
+        style={{ boxShadow: "0 0 45px -3px rgba(0,0,0,.3)" }}
+      />
+    </div>
+  </Wrapper>
+);