From d484fb56649cdd5e44fc8a29566914455a58dcfa Mon Sep 17 00:00:00 2001
From: rathi <rathiharivansh@gmail.com>
Date: Wed, 4 Dec 2024 23:39:14 -0500
Subject: [PATCH] re-debugging

---
 netlify.toml                       |  11 +
 src/components/ShareButtons.tsx    |  60 -----
 src/components/ui/calendar.tsx     |   4 +-
 src/components/ui/chart.tsx        | 368 -----------------------------
 src/components/ui/toast.tsx        |  12 +-
 src/pages/NetworkVisualization.tsx |  27 ++-
 src/pages/SocialClass.tsx          |   1 -
 src/pages/SuccessStories.tsx       |   1 -
 src/pages/Timeline.tsx             |   2 +-
 src/pages/Vendors.tsx              |   4 +-
 10 files changed, 40 insertions(+), 450 deletions(-)
 create mode 100644 netlify.toml
 delete mode 100644 src/components/ShareButtons.tsx
 delete mode 100644 src/components/ui/chart.tsx

diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 0000000..3b956f1
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,11 @@
+[build]
+  command = "npm run build"
+  publish = "dist"
+
+[build.environment]
+  NODE_VERSION = "18.20.5"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
diff --git a/src/components/ShareButtons.tsx b/src/components/ShareButtons.tsx
deleted file mode 100644
index 371383c..0000000
--- a/src/components/ShareButtons.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import { BlogPost } from '../data/blogPosts';
-
-interface ShareButtonsProps {
-  post: BlogPost;
-}
-
-export const ShareButtons: React.FC<ShareButtonsProps> = ({ post }) => {
-  const url = window.location.href;
-  const title = `Check out ${post.character}'s blog post: ${post.title}`;
-
-  const shareLinks = [
-    {
-      name: 'Twitter',
-      url: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`,
-      icon: (
-        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
-        </svg>
-      ),
-      color: 'text-blue-400 hover:text-blue-600',
-    },
-    {
-      name: 'Facebook',
-      url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
-      icon: (
-        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
-        </svg>
-      ),
-      color: 'text-blue-600 hover:text-blue-800',
-    },
-    {
-      name: 'Reddit',
-      url: `https://reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`,
-      icon: (
-        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>
-        </svg>
-      ),
-      color: 'text-orange-500 hover:text-orange-700',
-    },
-  ];
-
-  return (
-    <div className="flex items-center space-x-4 mt-6">
-      <span className="text-gray-600 font-medium">Share:</span>
-      {shareLinks.map((link) => (
-        <button
-          key={link.name}
-          onClick={() => window.open(link.url, '_blank')}
-          className={`${link.color} transition-colors`}
-          aria-label={`Share on ${link.name}`}
-        >
-          {link.icon}
-        </button>
-      ))}
-    </div>
-  );
-};
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index 1b7bc45..1c59433 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -58,8 +58,8 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
+        IconLeft: () => <ChevronLeftIcon className="h-4 w-4" />,
+        IconRight: () => <ChevronRightIcon className="h-4 w-4" />,
       }}
       {...props}
     />
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
deleted file mode 100644
index 13c1bd3..0000000
--- a/src/components/ui/chart.tsx
+++ /dev/null
@@ -1,368 +0,0 @@
-import * as React from 'react';
-import * as RechartsPrimitive from 'recharts';
-import {
-  NameType,
-  Payload,
-  ValueType,
-} from 'recharts/types/component/DefaultTooltipContent';
-
-import { cn } from '@/lib/utils';
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: '', dark: '.dark' } as const;
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode;
-    icon?: React.ComponentType;
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  );
-};
-
-type ChartContextProps = {
-  config: ChartConfig;
-};
-
-const ChartContext = React.createContext<ChartContextProps | null>(null);
-
-function useChart() {
-  const context = React.useContext(ChartContext);
-
-  if (!context) {
-    throw new Error('useChart must be used within a <ChartContainer />');
-  }
-
-  return context;
-}
-
-const ChartContainer = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<'div'> & {
-    config: ChartConfig;
-    children: React.ComponentProps<
-      typeof RechartsPrimitive.ResponsiveContainer
-    >['children'];
-  }
->(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-chart={chartId}
-        ref={ref}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  );
-});
-ChartContainer.displayName = 'Chart';
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
-  );
-
-  if (!colorConfig.length) {
-    return null;
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join('\n')}
-}
-`
-          )
-          .join('\n'),
-      }}
-    />
-  );
-};
-
-const ChartTooltip = RechartsPrimitive.Tooltip;
-
-const ChartTooltipContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<'div'> & {
-      hideLabel?: boolean;
-      hideIndicator?: boolean;
-      indicator?: 'line' | 'dot' | 'dashed';
-      nameKey?: string;
-      labelKey?: string;
-    }
->(
-  (
-    {
-      active,
-      payload,
-      className,
-      indicator = 'dot',
-      hideLabel = false,
-      hideIndicator = false,
-      label,
-      labelFormatter,
-      labelClassName,
-      formatter,
-      color,
-      nameKey,
-      labelKey,
-    },
-    ref
-  ) => {
-    const { config } = useChart();
-
-    const tooltipLabel = React.useMemo(() => {
-      if (hideLabel || !payload?.length) {
-        return null;
-      }
-
-      const [item] = payload;
-      const key = `${labelKey || item.dataKey || item.name || 'value'}`;
-      const itemConfig = getPayloadConfigFromPayload(config, item, key);
-      const value =
-        !labelKey && typeof label === 'string'
-          ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label;
-
-      if (labelFormatter) {
-        return (
-          <div className={cn('font-medium', labelClassName)}>
-            {labelFormatter(value, payload)}
-          </div>
-        );
-      }
-
-      if (!value) {
-        return null;
-      }
-
-      return <div className={cn('font-medium', labelClassName)}>{value}</div>;
-    }, [
-      label,
-      labelFormatter,
-      payload,
-      hideLabel,
-      labelClassName,
-      config,
-      labelKey,
-    ]);
-
-    if (!active || !payload?.length) {
-      return null;
-    }
-
-    const nestLabel = payload.length === 1 && indicator !== 'dot';
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
-          className
-        )}
-      >
-        {!nestLabel ? tooltipLabel : null}
-        <div className="grid gap-1.5">
-          {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || 'value'}`;
-            const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color || item.payload.fill || item.color;
-
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
-                  indicator === 'dot' && 'items-center'
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
-                            {
-                              'h-2.5 w-2.5': indicator === 'dot',
-                              'w-1': indicator === 'line',
-                              'w-0 border-[1.5px] border-dashed bg-transparent':
-                                indicator === 'dashed',
-                              'my-0.5': nestLabel && indicator === 'dashed',
-                            }
-                          )}
-                          style={
-                            {
-                              '--color-bg': indicatorColor,
-                              '--color-border': indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        'flex flex-1 justify-between leading-none',
-                        nestLabel ? 'items-end' : 'items-center'
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-foreground">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-);
-ChartTooltipContent.displayName = 'ChartTooltip';
-
-const ChartLegend = RechartsPrimitive.Legend;
-
-const ChartLegendContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<'div'> &
-    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
-      hideIcon?: boolean;
-      nameKey?: string;
-    }
->(
-  (
-    { className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },
-    ref
-  ) => {
-    const { config } = useChart();
-
-    if (!payload?.length) {
-      return null;
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex items-center justify-center gap-4',
-          verticalAlign === 'top' ? 'pb-3' : 'pt-3',
-          className
-        )}
-      >
-        {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || 'value'}`;
-          const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground'
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-);
-ChartLegendContent.displayName = 'ChartLegend';
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== 'object' || payload === null) {
-    return undefined;
-  }
-
-  const payloadPayload =
-    'payload' in payload &&
-    typeof payload.payload === 'object' &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined;
-
-  let configLabelKey: string = key;
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === 'string'
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string;
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string;
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config];
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-};
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index 48e2b11..15a3a89 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -20,11 +20,15 @@ const ToastViewport = React.forwardRef<
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
+type ToastProps = React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & {
+  variant?: 'default' | 'destructive';
+};
+
+type ToastActionElement = React.ReactElement<typeof ToastPrimitives.Action>;
+
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & {
-    variant?: 'default' | 'destructive';
-  }
+  ToastProps
 >(({ className, variant = 'default', ...props }, ref) => {
   return (
     <ToastPrimitives.Root
@@ -84,6 +88,8 @@ const ToastDescription = React.forwardRef<
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
 export {
+  type ToastProps,
+  type ToastActionElement,
   ToastProvider,
   ToastViewport,
   Toast,
diff --git a/src/pages/NetworkVisualization.tsx b/src/pages/NetworkVisualization.tsx
index f6d9f38..0dd59d7 100644
--- a/src/pages/NetworkVisualization.tsx
+++ b/src/pages/NetworkVisualization.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { characterNetwork } from '../data/character-network';
 import { CharacterNode, Relationship, BookNode } from '../types/character-network';
 import { Box, Typography, Paper, Grid, IconButton, Tooltip, Chip, Divider, Container, CircularProgress, Fade } from '@mui/material';
@@ -35,10 +35,15 @@ interface ForceGraphMethods {
   d3Force: (forceName: string, force?: d3.Force<d3.SimulationNodeDatum, undefined>) => void;
   d3ReheatSimulation: () => void;
   getZoom: () => number;
+  emitParticle: (particle: any) => void;
+  pauseAnimation: () => void;
+  resumeAnimation: () => void;
+  centerAt: (x?: number, y?: number, duration?: number) => void;
+  width: number;
+  height: number;
+  graphData: () => { nodes: NetworkNode[]; links: NetworkLink[] };
 }
 
-type ForceGraphInstance = ForceGraphMethods;
-
 // Add sage theme colors after the interface definitions
 const sageColors = {
   primary: {
@@ -79,7 +84,7 @@ export default function NetworkVisualization() {
   const [selectedRelationships, setSelectedRelationships] = useState<Relationship[]>([]);
   const [selectedBook, setSelectedBook] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  const graphRef = useRef<ForceGraphInstance>(null);
+  const graphRef = useRef<ForceGraphMethods>();
   const [isLoading, setIsLoading] = useState(true);
   const [isGraphReady, setIsGraphReady] = useState(false);
   const [dimensions, setDimensions] = useState({ width: 800, height: 700 });
@@ -166,24 +171,22 @@ export default function NetworkVisualization() {
       const bookName = characterNetwork.books.find(b => b.id === selectedBook)?.name;
       const nodes = characterNetwork.nodes
         .filter(node => node.novel === bookName)
-        .map((node, idx, arr) => {
-          // Create a circular layout with more spacing
+        .map((currentNode, idx, arr) => {
           const angle = (idx / arr.length) * 2 * Math.PI;
-          // Increase radius for better spacing
           const radius = Math.min(dimensions.width, dimensions.height) * 0.35;
 
           const x = dimensions.width / 2 + radius * Math.cos(angle);
           const y = dimensions.height / 2 + radius * Math.sin(angle);
 
           return {
-            ...node,
+            ...currentNode,
             val: 10,
             x,
             y,
             fx: x,
             fy: y,
-            color: node.type === 'protagonist' ? sageColors.primary.start :
-                   node.type === 'antagonist' ? sageColors.secondary.start :
+            color: currentNode.type === 'protagonist' ? sageColors.primary.start :
+                   currentNode.type === 'antagonist' ? sageColors.secondary.start :
                    sageColors.tertiary.start
           } as NetworkNode;
         });
@@ -534,7 +537,7 @@ export default function NetworkVisualization() {
               <Fade in={!isLoading && isGraphReady} timeout={500}>
                 <Box sx={{ width: '100%', height: '100%' }}>
                   <ForceGraph2D
-                    ref={graphRef}
+                    ref={graphRef as any}
                     graphData={getGraphData()}
                     onNodeClick={handleNodeClick}
                     nodeCanvasObject={renderNodeCanvas}
@@ -557,7 +560,7 @@ export default function NetworkVisualization() {
                       }
                     }}
                     warmupTicks={0}
-                    nodeLabel={(node: NetworkNode) => ''}
+                    nodeLabel={() => ''}
                     linkCurvature={0.3}
                     linkDirectionalParticles={0}
                     onEngineStop={() => {
diff --git a/src/pages/SocialClass.tsx b/src/pages/SocialClass.tsx
index f006c2c..150e23a 100644
--- a/src/pages/SocialClass.tsx
+++ b/src/pages/SocialClass.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Typography, Paper, Grid, Chip, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import SocialClassView from '../components/SocialClassView';
diff --git a/src/pages/SuccessStories.tsx b/src/pages/SuccessStories.tsx
index 1944fbd..75475b4 100644
--- a/src/pages/SuccessStories.tsx
+++ b/src/pages/SuccessStories.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { Heart, MapPin, Calendar } from 'lucide-react';
 import { successStories, SuccessStory } from '@/data/success-stories';
-import { cn } from '@/lib/utils';
 
 const StoryModal = ({ story, onClose }: { story: SuccessStory; onClose: () => void }) => {
   return (
diff --git a/src/pages/Timeline.tsx b/src/pages/Timeline.tsx
index e42b622..9084e5f 100644
--- a/src/pages/Timeline.tsx
+++ b/src/pages/Timeline.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Box, Typography, Paper, Grid, Chip } from '@mui/material';
 import { TimelineEvent } from '../types/timeline';
 import InteractiveTimeline from '../components/timeline/InteractiveTimeline';
diff --git a/src/pages/Vendors.tsx b/src/pages/Vendors.tsx
index a2380bc..c17e3bb 100644
--- a/src/pages/Vendors.tsx
+++ b/src/pages/Vendors.tsx
@@ -13,8 +13,8 @@ const CATEGORIES: VendorCategory[] = [
   'catering',
   'music',
   'flowers',
-  'transport',
-  'stationery'
+  'matchmaking',
+  'modiste'
 ];
 
 const LOCATIONS = Array.from(