feat(Preview): add Preview component (#6014)

* feat(Preview): add Preview component

* feat(Preview): use radial gradient

* feat(Preview): add width and height props

* feat(Preview): update storybook

* fix(Preview): update css

Author: junwen-k

components/Common/Preview/index.module.css

@@ -0,0 +1,46 @@
+.root {
+  @apply relative
+    flex
+    items-center
+    bg-neutral-950
+    bg-[url('/static/images/patterns/hexagon-grid.svg')]
+    bg-contain
+    bg-center
+    after:absolute
+    after:inset-0
+    after:m-auto
+    after:aspect-square
+    after:w-1/3
+    after:rounded-full
+    after:bg-gradient-radial
+    after:blur-3xl;
+
+  &.announcement {
+    @apply after:from-green-700/90;
+  }
+
+  &.release {
+    @apply after:from-info-600/90;
+  }
+
+  &.vulnerability {
+    @apply after:from-warning-600/90;
+  }
+
+  & > .container {
+    @apply z-10
+      mx-auto
+      flex
+      max-w-xl
+      flex-col
+      gap-12
+      text-center
+      text-3xl
+      font-semibold
+      text-white;
+
+    & > .logo {
+      @apply mx-auto;
+    }
+  }
+}

components/Common/Preview/index.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Preview from './';
+
+type Story = StoryObj<typeof Preview>;
+type Meta = MetaObj<typeof Preview>;
+
+export const Default: Story = {
+  args: {
+    title:
+      'Changing the End-of-Life Date for Node.js 16 to September 11th, 2023',
+  },
+};
+
+export const Announcement: Story = {
+  args: {
+    type: 'announcement',
+    title:
+      'Changing the End-of-Life Date for Node.js 16 to September 11th, 2023',
+  },
+};
+
+export const Release: Story = {
+  args: {
+    type: 'release',
+    title: 'Node v20.5.0 (Current)',
+  },
+};
+
+export const Vulnerability: Story = {
+  args: {
+    type: 'vulnerability',
+    title: 'OpenSSL update assessment, and Node.js project plans',
+  },
+};
+
+export const CustomSize: Story = {
+  args: {
+    title:
+      'Changing the End-of-Life Date for Node.js 16 to September 11th, 2023',
+    width: 600,
+    height: 315,
+  },
+};
+
+export default { component: Preview } as Meta;

components/Common/Preview/index.tsx

@@ -0,0 +1,46 @@
+import classNames from 'classnames';
+import Image from 'next/image';
+import type { CSSProperties, ComponentProps, FC, ReactNode } from 'react';
+
+import { useRouter } from '@/hooks/useRouter';
+
+import styles from './index.module.css';
+
+type PreviewProps = {
+  type?: 'announcement' | 'release' | 'vulnerability';
+  title: ReactNode;
+  height?: CSSProperties['height'];
+  width?: CSSProperties['width'];
+} & Omit<ComponentProps<'div'>, 'children'>;
+
+const Preview: FC<PreviewProps> = ({
+  type = 'announcement',
+  title,
+  height = 630,
+  width = 1200,
+  ...props
+}) => {
+  const { basePath } = useRouter();
+
+  return (
+    <div
+      {...props}
+      style={{ width, height, ...props.style }}
+      className={classNames(styles.root, styles[type], props.className)}
+    >
+      <div className={styles.container}>
+        <Image
+          className={styles.logo}
+          priority
+          width="71"
+          height="80"
+          src={`${basePath}/static/images/logos/js-white.svg`}
+          alt="Node.js"
+        />
+        <h1>{title}</h1>
+      </div>
+    </div>
+  );
+};
+
+export default Preview;