upcoming: [UIE-10429] - Reserved IP: Implement Empty Landing state.

packages/manager/.changeset/pr-13521-upcoming-features-1774341582397.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Implement Empty Landing State for Reserve IP ([#13521](https://github.com/linode/manager/pull/13521))

packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLanding.tsx

@@ -3,7 +3,15 @@
 
 import { LandingHeader } from 'src/components/LandingHeader';
 
+import { ReservedIpsLandingEmptyState } from './ReservedIpsLandingEmptyState';
+
 export const ReservedIpsLanding = () => {
+  // TODO: Replace with actual data check once API queries are implemented
+  const showEmptyState = true;
+
+  if (showEmptyState) {
+    return <ReservedIpsLandingEmptyState />;
+  }
   return (
     <>
       <LandingHeader

packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLandingEmptyState.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import NetworkingIcon from 'src/assets/icons/entityIcons/networking.svg';
+import { DocumentTitleSegment } from 'src/components/DocumentTitle';
+import { ResourcesSection } from 'src/components/EmptyLandingPageResources/ResourcesSection';
+
+import {
+  gettingStartedGuides,
+  headers,
+  linkAnalyticsEvent,
+  youtubeLinkData,
+} from './ReservedIpsLandingEmptyStateData';
+
+export const ReservedIpsLandingEmptyState = () => {
+  return (
+    <React.Fragment>
+      <DocumentTitleSegment segment="Reserved IP Addresses" />
+      <ResourcesSection
+        buttonProps={[
+          {
+            children: 'Reserve an IP Address',
+            onClick: () => {
+              // TODO: Open Reserve IP create drawer once ready
+            },
+          },
+        ]}
+        descriptionMaxWidth={500}
+        gettingStartedGuidesData={gettingStartedGuides}
+        headers={headers}
+        icon={NetworkingIcon}
+        linkAnalyticsEvent={linkAnalyticsEvent}
+        wide={true}
+        youtubeLinkData={youtubeLinkData}
+      />
+    </React.Fragment>
+  );
+};

packages/manager/src/features/ReservedIps/ReservedIpsLanding/ReservedIpsLandingEmptyStateData.ts

@@ -0,0 +1,56 @@
+import {
+  docsLink,
+  youtubeChannelLink,
+  youtubeMoreLinkText,
+} from 'src/utilities/emptyStateLandingUtils';
+
+import type {
+  ResourcesHeaders,
+  ResourcesLinks,
+  ResourcesLinkSection,
+} from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
+
+export const headers: ResourcesHeaders = {
+  description:
+    'Reserve and manage public IPv4 addresses across regions, and assign them to resources like Linodes or NodeBalancers when needed.',
+  subtitle: 'Dedicated IP addressing for your cloud resources',
+  title: 'Reserved IP Addresses',
+};
+
+export const gettingStartedGuides: ResourcesLinkSection = {
+  links: [
+    {
+      text: 'Overview of Reserved IPs',
+      to: 'https://www.linode.com/docs/', // To be updated with actual Reserved IPs documentation link once available
+    },
+    {
+      text: 'Getting Started with Reserved IPs',
+      to: 'https://www.linode.com/docs/', // To be updated with actual Reserved IPs documentation link once available
+    },
+    {
+      text: 'Managing and Assigning Reserved IPs',
+      to: 'https://www.linode.com/docs/', // To be updated with actual Reserved IPs documentation link once available
+    },
+  ],
+  moreInfo: {
+    text: 'View additional Reserved IP documentation',
+    to: docsLink,
+  },
+  title: 'Getting Started Guides',
+};
+
+export const youtubeLinkData: ResourcesLinkSection = {
+  links: [
+    // To be added once we have Reserved IPs specific YouTube content
+  ],
+  moreInfo: {
+    text: youtubeMoreLinkText,
+    to: youtubeChannelLink,
+  },
+  title: 'Video Playlist',
+};
+
+export const linkAnalyticsEvent: ResourcesLinks['linkAnalyticsEvent'] = {
+  action: 'Click:link',
+  category: 'Reserved IPs landing page empty',
+};