harivansh-afk/Austens-Wedding-Guide
1
0
Fork 0
mirror of https://github.com/harivansh-afk/Austens-Wedding-Guide.git synced 2026-04-15 10:05:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

re-debugging

Browse source
This commit is contained in:
Harivansh Rathi 2024-12-04 23:39:14 -05:00
parent 6e913c297c
commit d484fb5664
10 changed files with 40 additions and 450 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/components/ShareButtons.tsx
View file

@ -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>
);
};

4
src/components/ui/calendar.tsx
View file

@ -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}
/>

368
src/components/ui/chart.tsx
View file

@ -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,
};

12
src/components/ui/toast.tsx
View file

@ -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,

27
src/pages/NetworkVisualization.tsx
View file

@ -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={() => {

1
src/pages/SocialClass.tsx
View file

@ -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';

1
src/pages/SuccessStories.tsx
View file

@ -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 (

2
src/pages/Timeline.tsx
View file

@ -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';

4
src/pages/Vendors.tsx
View file

@ -13,8 +13,8 @@ const CATEGORIES: VendorCategory[] = [
'catering',
'music',
'flowers',
'transport',
'stationery'
'matchmaking',
'modiste'
];
const LOCATIONS = Array.from(