feat(explorer): add funcitonality to remove networks (#2401)

.changeset/long-flowers-tease.md

@@ -0,0 +1,5 @@
+---
+'@kadena/explorer': minor
+---
+
+add posibility to remove networks

packages/apps/explorer/src/components/CardPattern/CardPattern.css.ts

@@ -0,0 +1,47 @@
+import { atoms, responsiveStyle, token } from '@kadena/kode-ui/styles';
+import { style } from '@vanilla-extract/css';
+
+// NOTE: Padding is applied via this container instead of margin to the container to avoid margin collapse with the body
+export const paddingContainer = style(
+  responsiveStyle({
+    md: {
+      paddingBlock: token('size.n32'),
+    },
+  }),
+);
+
+export const container = style([
+  atoms({
+    borderRadius: 'md',
+    padding: 'xl',
+    backgroundColor: 'layer.default',
+  }),
+  {
+    ...responsiveStyle({
+      md: {
+        border: token('border.hairline'),
+        width: '42rem',
+        marginInlineStart: '50%',
+        transform: 'translateX(-50%)',
+      },
+    }),
+  },
+]);
+
+export const bodyContent = style([
+  { marginBlockStart: token('spacing.xl'), flex: 1.5 },
+  {
+    ...responsiveStyle({
+      md: {
+        marginBlockStart: token('size.n25'),
+      },
+    }),
+    selectors: {
+      "&[data-layout='no-visual']": responsiveStyle({
+        md: {
+          marginBlockStart: token('size.n10'),
+        },
+      }),
+    },
+  },
+]);

packages/apps/explorer/src/components/CardPattern/CardPattern.tsx

@@ -0,0 +1,88 @@
+import { SpireKeyKdacolorLogoGreen } from '@kadena/kode-icons/product';
+import { Box, Heading, Stack, Text } from '@kadena/kode-ui';
+import { atoms, token } from '@kadena/kode-ui/styles';
+import React from 'react';
+import { bodyContent, container, paddingContainer } from './CardPattern.css';
+
+export const CardContainer = ({ children }: { children: React.ReactNode }) => {
+  // TODO: replace with card component when it accepts className
+  return (
+    <div className={paddingContainer}>
+      <div className={container}>{children}</div>
+    </div>
+  );
+};
+
+interface CardContentBlockProps {
+  title: string;
+  visual?: React.ReactNode;
+  description?: string;
+  children: React.ReactNode;
+}
+
+export const CardContentBlock = ({
+  title,
+  visual,
+  description,
+  children,
+}: CardContentBlockProps) => {
+  return (
+    <Stack flexDirection={{ xs: 'column', md: 'row' }} gap="md">
+      <Stack flexDirection="column" alignItems="flex-start" flex={1}>
+        <Box>{visual}</Box>
+        {title && (
+          <Heading
+            className={atoms({
+              marginBlockStart: 'sm',
+              marginBlockEnd: 'md',
+            })}
+          >
+            {title}
+          </Heading>
+        )}
+        {description && <Text as="p">{description}</Text>}
+      </Stack>
+      <Stack
+        flexDirection="column"
+        className={bodyContent}
+        data-layout={!visual && 'no-visual'}
+      >
+        {children}
+      </Stack>
+    </Stack>
+  );
+};
+
+interface CardFooterProps {
+  children: React.ReactNode;
+  separated?: boolean;
+}
+
+export const CardFooter = ({
+  children,
+  separated = false,
+}: CardFooterProps) => {
+  return (
+    <Stack
+      marginBlockStart="xxl"
+      gap="md"
+      justifyContent={separated ? 'space-between' : 'flex-end'}
+    >
+      {children}
+    </Stack>
+  );
+};
+
+export const SpireKeyCardContentBlock = (
+  props: Omit<CardContentBlockProps, 'visual'>,
+) => (
+  <CardContentBlock
+    {...props}
+    visual={
+      <SpireKeyKdacolorLogoGreen
+        aria-label="SpireKey"
+        fontSize={token('typography.fontSize.9xl')}
+      />
+    }
+  />
+);

packages/apps/explorer/src/components/logo/logo.tsx

@@ -8,6 +8,7 @@ const Logo: FC = () => {
   if (theme === 'dark') {
     return (
       <svg
+        style={{ width: '100%' }}
         data-style="kdacolor"
         width="230"
         height="40"

packages/apps/explorer/src/components/navbar/navbar.tsx

@@ -45,7 +45,10 @@ export const NavBar: FC<
       </Stack>
       <Stack flex={1}>{children}</Stack>
 
-      <Stack>
+      <Stack alignItems="center">
+        <Media lessThan="md">
+          <SelectNetwork />
+        </Media>
         <ThemeToggle />
         <GraphQLQueryDialog />
       </Stack>