aljaz/goose
1
0
Fork 0
mirror of https://github.com/aljazceru/goose.git synced 2025-12-18 22:54:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

ui-v2: basic timeline and reusable tile components (#2603)

Browse Source 
Co-authored-by: Spencer Martin <spencermartin@block.xyz>
This commit is contained in:
Alex Hancock
2025-05-20 17:25:42 -04:00
committed by GitHub
parent 60cf753cad
commit 7356bd5df6
25 changed files with 1413 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui-v2/electron/main.ts
View File

@@ -26,8 +26,12 @@ async function createWindow() {
// Create the browser window with headless options when needed
const mainWindow = new BrowserWindow({
titleBarStyle: process.platform === 'darwin' ? 'hidden' : 'default',
trafficLightPosition: process.platform === 'darwin' ? { x: 16, y: 10 } : undefined,
frame: false,
width: 1200,
height: 800,
minWidth: 800,
...(isHeadless
? {
show: false,

7
ui-v2/src/App.tsx
View File

@@ -2,19 +2,12 @@ import React, { Suspense } from 'react';
import { Outlet } from '@tanstack/react-router';
import GooseLogo from './components/GooseLogo';
import SuspenseLoader from './components/SuspenseLoader';
const App: React.FC = (): React.ReactElement => {
return (
<Suspense fallback={<SuspenseLoader />}>
<div className="p-5 max-w-3xl mx-auto">
<div className="flex items-center gap-4 mb-4">
<GooseLogo />
<h1 className="text-2xl font-bold text-textProminent">Goose v2</h1>
</div>
<Outlet />
</div>
</Suspense>
);
};

BIN
ui-v2/src/assets/backgrounds/clock-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
ui-v2/src/assets/backgrounds/wave-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

13
ui-v2/src/assets/logo.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 10.5733C0.5 8.19817 2.41385 6.27272 4.77471 6.27272H6.67984C9.04069 6.27272 10.9545 8.19817 10.9545 10.5733V18.6994C10.9545 21.0745 9.04069 23 6.67983 23H4.77471C2.41385 23 0.5 21.0745 0.5 18.6994V10.5733Z" fill="white"/>
<path d="M6.67977 22.6416V23H4.77477V22.6416H6.67977ZM10.5983 18.6994V10.5734C10.5983 8.39611 8.84392 6.63111 6.67977 6.63111H4.77477C2.61062 6.63111 0.856231 8.39611 0.856231 10.5734V18.6994C0.856231 20.8766 2.61062 22.6416 4.77477 22.6416V23L4.66449 22.9986C2.39119 22.9407 0.558919 21.0974 0.501392 18.8103L0.5 18.6994V10.5734C0.5 8.23528 2.35457 6.33297 4.66449 6.27412L4.77477 6.27272H6.67977L6.7904 6.27412C9.10023 6.33307 10.9545 8.23534 10.9545 10.5734V18.6994L10.9532 18.8103C10.8956 21.0973 9.06361 22.9406 6.7904 22.9986L6.67977 23V22.6416C8.84392 22.6416 10.5983 20.8766 10.5983 18.6994Z" fill="white"/>
<path d="M13.0453 4.27471C13.0453 1.91385 14.9592 0 17.3201 0H19.2252C21.586 0 23.4999 1.91385 23.4999 4.27471V6.17984C23.4999 8.54069 21.586 10.4545 19.2252 10.4545H17.3201C14.9592 10.4545 13.0453 8.54069 13.0453 6.17983V4.27471Z" fill="white"/>
<path d="M19.2251 10.0983V10.4545H17.3201V10.0983H19.2251ZM23.1437 6.17977V4.27477C23.1437 2.11062 21.3893 0.356231 19.2251 0.356231H17.3201C15.156 0.356231 13.4016 2.11062 13.4016 4.27477V6.17977C13.4016 8.34392 15.156 10.0983 17.3201 10.0983V10.4545L17.2098 10.4532C14.9366 10.3956 13.1044 8.56358 13.0467 6.2904L13.0453 6.17977V4.27477C13.0453 1.95075 14.8999 0.0598847 17.2098 0.00139153L17.3201 0H19.2251L19.3357 0.00139153C21.6456 0.0599881 23.4999 1.95082 23.4999 4.27477V6.17977L23.4985 6.2904C23.4408 8.56351 21.6089 10.3955 19.3357 10.4532L19.2251 10.4545V10.0983C21.3893 10.0983 23.1437 8.34392 23.1437 6.17977Z" fill="white"/>
<path d="M19.3182 14.6364C19.3182 13.4816 20.2543 12.5455 21.4091 12.5455V12.5455C22.5639 12.5455 23.5 13.4816 23.5 14.6364V14.6364C23.5 15.7911 22.5639 16.7273 21.4091 16.7273V16.7273C20.2543 16.7273 19.3182 15.7911 19.3182 14.6364V14.6364Z" fill="white"/>
<path d="M23.1522 14.6362C23.1521 13.6736 22.3715 12.8933 21.4089 12.8933C20.4464 12.8933 19.6661 13.6736 19.666 14.6362C19.666 15.5988 20.4463 16.3794 21.4089 16.3794V16.7273L21.3016 16.7246C20.2324 16.6704 19.3751 15.813 19.3209 14.7439L19.3182 14.6362C19.3182 13.4815 20.2543 12.5455 21.4089 12.5455L21.5166 12.5482C22.6213 12.6042 23.4999 13.5176 23.5 14.6362L23.4973 14.7439C23.4413 15.8486 22.5276 16.7273 21.4089 16.7273V16.3794C22.3716 16.3794 23.1522 15.5988 23.1522 14.6362Z" fill="white"/>
<path d="M13.0453 14.6364C13.0453 13.4816 13.9815 12.5455 15.1363 12.5455V12.5455C16.291 12.5455 17.2272 13.4816 17.2272 14.6364V14.6364C17.2272 15.7911 16.291 16.7273 15.1363 16.7273V16.7273C13.9815 16.7273 13.0453 15.7911 13.0453 14.6364V14.6364Z" fill="white"/>
<path d="M16.8793 14.6362C16.8793 13.6736 16.0987 12.8933 15.1361 12.8933C14.1735 12.8933 13.3932 13.6736 13.3932 14.6362C13.3932 15.5988 14.1735 16.3794 15.1361 16.3794V16.7273L15.0287 16.7246C13.9596 16.6704 13.1023 15.813 13.0481 14.7439L13.0453 14.6362C13.0454 13.4815 13.9814 12.5455 15.1361 12.5455L15.2438 12.5482C16.3485 12.6042 17.2271 13.5176 17.2272 14.6362L17.2244 14.7439C17.1685 15.8486 16.2548 16.7273 15.1361 16.7273V16.3794C16.0987 16.3794 16.8793 15.5988 16.8793 14.6362Z" fill="white"/>
<path d="M0.5 2.09091C0.5 0.936132 1.45869 0 2.64129 0H8.81325C9.99586 0 10.9545 0.936132 10.9545 2.09091V2.09091C10.9545 3.24569 9.99586 4.18182 8.81325 4.18182H2.64129C1.45869 4.18182 0.5 3.24569 0.5 2.09091V2.09091Z" fill="white"/>
<path d="M8.81333 3.83398V4.18182H2.64121V3.83398H8.81333ZM10.5983 2.09074C10.5983 1.12815 9.79917 0.347834 8.81333 0.347834H2.64121C1.65542 0.347891 0.85629 1.12818 0.856231 2.09074C0.856231 3.05334 1.65538 3.83393 2.64121 3.83398V4.18182L2.53128 4.1791C1.43629 4.12498 0.558276 3.26758 0.502783 2.19842L0.5 2.09074C0.500057 0.972081 1.39984 0.0586407 2.53128 0.00271745L2.64121 0H8.81333L8.92361 0.00271745C10.055 0.0587386 10.9545 0.972147 10.9545 2.09074L10.9518 2.19842C10.8963 3.26751 10.0185 4.12489 8.92361 4.1791L8.81333 4.18182V3.83398C9.79921 3.83398 10.5983 3.05338 10.5983 2.09074Z" fill="white"/>
<path d="M13.1735 19.8579C13.5338 19.0234 14.546 18.6107 15.4505 18.9215L15.4934 18.9368L16.8286 19.4316L16.9187 19.4639C17.854 19.7861 18.8876 19.7689 19.8114 19.4137L21.0304 18.9449L21.0731 18.9291C21.9732 18.6075 22.9911 19.0079 23.3631 19.8381C23.735 20.6682 23.3225 21.6186 22.4412 21.982L22.3989 21.9989L21.1798 22.4676C19.3933 23.1545 17.3909 23.1772 15.5885 22.5329L15.5029 22.5016L14.1678 22.007L14.1252 21.9906C13.2389 21.6378 12.8131 20.6925 13.1735 19.8579Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

139
ui-v2/src/components/BrandCard.tsx Normal file
View File

@@ -0,0 +1,139 @@
import React from 'react';
interface BrandCardProps {
date?: Date;
className?: string;
}
// Array of congratulatory messages for past days
const pastDayMessages = [
{ title: "Great work!", message: "You accomplished so much" },
{ title: "Well done!", message: "Another successful day" },
{ title: "Fantastic job!", message: "Making progress every day" },
{ title: "Nice one!", message: "Another day in the books" },
{ title: "Awesome work!", message: "Keep up the momentum" }
];
export default function BrandCard({ date, className = '' }: BrandCardProps) {
const isToday = date ? new Date().toDateString() === date.toDateString() : true;
// Get a consistent message for each date
const getPastDayMessage = (date: Date) => {
// Use the date's day as an index to select a message
const index = date.getDate() % pastDayMessages.length;
return pastDayMessages[index];
};
// Get message for past days
const pastMessage = date ? getPastDayMessage(date) : pastDayMessages[0];
return (
<div
className={`
flex flex-col justify-between
p-4
w-[366px] h-[256px]
${isToday
? 'bg-textStandard dark:bg-white'
: 'bg-gray-400/40 dark:bg-gray-400/40'
}
rounded-[18px]
relative
overflow-hidden
transition-all duration-200
shadow-[0_0_13.7px_rgba(0,0,0,0.04)]
dark:shadow-[0_0_24px_rgba(255,255,255,0.02)]
${className}
`}
>
{/* Content */}
<div className="relative z-10 w-full">
{/* Logo */}
<div className={`
w-6 h-6
${isToday
? '[&_path]:fill-current text-white dark:text-gray-900'
: '[&_path]:fill-current text-white/60 dark:text-white/60'
}
`}>
<svg width="24" height="23" viewBox="0 0 24 23" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M0.5 10.5733C0.5 8.19815 2.41385 6.27271 4.77471 6.27271H6.67984C9.04069 6.27271 10.9545 8.19816 10.9545 10.5733V18.6994C10.9545 21.0745 9.04069 23 6.67983 23H4.77471C2.41385 23 0.5 21.0745 0.5 18.6994V10.5733Z" />
<path d="M6.67977 22.6416V23H4.77477V22.6416H6.67977ZM10.5983 18.6993V10.5733C10.5983 8.3961 8.84392 6.63109 6.67977 6.63109H4.77477C2.61062 6.63109 0.856231 8.3961 0.856231 10.5733V18.6993C0.856231 20.8766 2.61062 22.6416 4.77477 22.6416V23L4.66449 22.9986C2.39119 22.9407 0.558919 21.0974 0.501392 18.8103L0.5 18.6993V10.5733C0.5 8.23526 2.35457 6.33295 4.66449 6.27411L4.77477 6.27271H6.67977L6.7904 6.27411C9.10023 6.33306 10.9545 8.23533 10.9545 10.5733V18.6993L10.9532 18.8103C10.8956 21.0973 9.06361 22.9406 6.7904 22.9986L6.67977 23V22.6416C8.84392 22.6416 10.5983 20.8766 10.5983 18.6993Z" />
<path d="M13.0453 4.27471C13.0453 1.91385 14.9592 0 17.3201 0H19.2252C21.586 0 23.4999 1.91385 23.4999 4.27471V6.17984C23.4999 8.54069 21.586 10.4545 19.2252 10.4545H17.3201C14.9592 10.4545 13.0453 8.54069 13.0453 6.17983V4.27471Z" />
<path d="M19.2251 10.0983V10.4545H17.3201V10.0983H19.2251ZM23.1437 6.17977V4.27477C23.1437 2.11062 21.3893 0.356231 19.2251 0.356231H17.3201C15.156 0.356231 13.4016 2.11062 13.4016 4.27477V6.17977C13.4016 8.34392 15.156 10.0983 17.3201 10.0983V10.4545L17.2098 10.4532C14.9366 10.3956 13.1044 8.56358 13.0467 6.2904L13.0453 6.17977V4.27477C13.0453 1.95075 14.8999 0.0598847 17.2098 0.00139153L17.3201 0H19.2251L19.3357 0.00139153C21.6456 0.0599881 23.4999 1.95082 23.4999 4.27477V6.17977L23.4985 6.2904C23.4408 8.56351 21.6089 10.3955 19.3357 10.4532L19.2251 10.4545V10.0983C21.3893 10.0983 23.1437 8.34392 23.1437 6.17977Z" />
<path d="M19.3182 14.6363C19.3182 13.4815 20.2543 12.5454 21.4091 12.5454V12.5454C22.5639 12.5454 23.5 13.4815 23.5 14.6363V14.6363C23.5 15.7911 22.5639 16.7272 21.4091 16.7272V16.7272C20.2543 16.7272 19.3182 15.7911 19.3182 14.6363V14.6363Z" />
<path d="M23.1522 14.6361C23.1521 13.6736 22.3715 12.8932 21.4089 12.8932C20.4464 12.8933 19.6661 13.6736 19.666 14.6361C19.666 15.5988 20.4464 16.3793 21.4089 16.3794V16.7272L21.3016 16.7245C20.2324 16.6704 19.3751 15.813 19.3209 14.7438L19.3182 14.6361C19.3183 13.4815 20.2543 12.5455 21.4089 12.5454L21.5166 12.5481C22.6213 12.6041 23.5 13.5175 23.5 14.6361L23.4973 14.7438C23.4413 15.8486 22.5276 16.7272 21.4089 16.7272V16.3794C22.3716 16.3794 23.1522 15.5988 23.1522 14.6361Z" />
<path d="M13.0453 14.6363C13.0453 13.4815 13.9815 12.5454 15.1363 12.5454V12.5454C16.291 12.5454 17.2272 13.4815 17.2272 14.6363V14.6363C17.2272 15.7911 16.291 16.7272 15.1363 16.7272V16.7272C13.9815 16.7272 13.0453 15.7911 13.0453 14.6363V14.6363Z" />
<path d="M16.8793 14.6361C16.8793 13.6736 16.0987 12.8932 15.1361 12.8932C14.1735 12.8933 13.3932 13.6736 13.3932 14.6361C13.3932 15.5988 14.1735 16.3793 15.1361 16.3794V16.7272L15.0287 16.7245C13.9596 16.6704 13.1023 15.813 13.0481 14.7438L13.0453 14.6361C13.0454 13.4815 13.9814 12.5455 15.1361 12.5454L15.2438 12.5481C16.3485 12.6041 17.2271 13.5175 17.2272 14.6361L17.2244 14.7438C17.1685 15.8486 16.2548 16.7272 15.1361 16.7272V16.3794C16.0987 16.3794 16.8793 15.5988 16.8793 14.6361Z" />
<path d="M0.5 2.09091C0.5 0.936132 1.45869 0 2.64129 0H8.81325C9.99586 0 10.9545 0.936132 10.9545 2.09091V2.09091C10.9545 3.24569 9.99586 4.18182 8.81325 4.18182H2.64129C1.45869 4.18182 0.5 3.24569 0.5 2.09091V2.09091Z" />
<path d="M8.81333 3.83398V4.18182H2.64121V3.83398H8.81333ZM10.5983 2.09074C10.5983 1.12815 9.79917 0.347834 8.81333 0.347834H2.64121C1.65542 0.347891 0.85629 1.12818 0.856231 2.09074C0.856231 3.05334 1.65538 3.83393 2.64121 3.83398V4.18182L2.53128 4.1791C1.43629 4.12498 0.558276 3.26758 0.502783 2.19842L0.5 2.09074C0.500057 0.972081 1.39984 0.0586407 2.53128 0.00271745L2.64121 0H8.81333L8.92361 0.00271745C10.055 0.0587386 10.9545 0.972147 10.9545 2.09074L10.9518 2.19842C10.8963 3.26751 10.0185 4.12489 8.92361 4.1791L8.81333 4.18182V3.83398C9.79921 3.83398 10.5983 3.05338 10.5983 2.09074Z" />
<path d="M13.1735 19.8579C13.5338 19.0233 14.546 18.6107 15.4505 18.9214L15.4934 18.9368L16.8286 19.4315L16.9187 19.4638C17.854 19.786 18.8876 19.7689 19.8114 19.4136L21.0304 18.9449L21.0731 18.9291C21.9732 18.6074 22.9911 19.0079 23.3631 19.838C23.735 20.6682 23.3225 21.6185 22.4412 21.9819L22.3989 21.9989L21.1798 22.4675C19.3933 23.1545 17.3909 23.1771 15.5885 22.5328L15.5029 22.5016L14.1678 22.0069L14.1252 21.9906C13.2389 21.6378 12.8131 20.6924 13.1735 19.8579Z" />
</g>
</svg>
</div>
</div>
{/* Text content - bottom */}
<div className="relative z-10 w-full flex flex-col">
{isToday ? (
<>
{/* Today's content */}
<h2
className={`
font-['Cash_Sans'] font-semibold text-base
text-white dark:text-gray-600
tracking-[0.08em] max-w-[565px]
mb-2
transition-colors
`}
>
Good morning
</h2>
<h1
style={{ fontWeight: 200 }}
className={`
font-['Cash_Sans'] text-[32px]
text-white dark:text-gray-600
leading-tight max-w-[565px]
tracking-normal
transition-colors
`}
>
You've got 3 major updates this morning
</h1>
</>
) : (
<>
{/* Past/Future date content */}
<h2
className={`
font-['Cash_Sans'] font-semibold text-base
text-white/60 dark:text-white/60
tracking-[0.08em] max-w-[565px]
mb-2
transition-colors
`}
>
{pastMessage?.title || 'Hello'}
</h2>
<h1
style={{ fontWeight: 200 }}
className={`
font-['Cash_Sans'] text-[32px]
text-white/60 dark:text-white/60
leading-tight max-w-[565px]
tracking-normal
transition-colors
`}
>
{pastMessage?.message || 'Great work'}
</h1>
</>
)}
</div>
</div>
);
}

29
ui-v2/src/components/Button.test.tsx
View File

@@ -1,29 +0,0 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import { Button } from './Button';
describe('Button', () => {
it('renders with children', () => {
render(<Button>Click me</Button>);
expect(screen.getByText('Click me')).toBeInTheDocument();
});
it('calls onClick handler when clicked', async () => {
const handleClick = vi.fn();
render(<Button onClick={handleClick}>Click me</Button>);
await userEvent.click(screen.getByText('Click me'));
expect(handleClick).toHaveBeenCalledTimes(1);
});
it('applies variant styles correctly', () => {
render(<Button variant="secondary">Secondary Button</Button>);
const button = screen.getByText('Secondary Button');
expect(button).toHaveStyle({
backgroundColor: '#6c757d',
});
});
});

68
ui-v2/src/components/Button.tsx
View File

@@ -1,68 +0,0 @@
import React from 'react';
import { electronService } from '../services/electron';
interface ButtonProps {
onClick?: () => void;
children: React.ReactNode;
copyText?: string;
variant?: 'primary' | 'secondary';
className?: string;
}
export const Button: React.FC<ButtonProps> = ({
onClick,
children,
copyText,
variant = 'primary',
className = '',
}) => {
const handleClick = async () => {
if (copyText) {
try {
console.log('Attempting to copy text:', copyText);
await electronService.copyToClipboard(copyText);
console.log('Text copied successfully');
} catch (error) {
console.error('Failed to copy:', error);
}
}
if (onClick) {
onClick();
}
};
const getVariantStyles = () => {
switch (variant) {
case 'secondary':
return {
backgroundColor: '#6c757d',
color: 'white',
};
case 'primary':
default:
return {
backgroundColor: '#4CAF50',
color: 'white',
};
}
};
return (
<button
className={`app-button ${className}`}
onClick={handleClick}
style={{
padding: '10px 20px',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
transition: 'background-color 0.2s',
...getVariantStyles(),
}}
>
{children}
</button>
);
};

152
ui-v2/src/components/ChartTile.tsx Normal file
View File

@@ -0,0 +1,152 @@
import React from 'react';
import { useTimelineStyles } from '../hooks/useTimelineStyles';
interface ChartTileProps {
title: string;
value: string;
trend?: string;
data: number[];
icon: React.ReactNode;
variant?: 'line' | 'bar';
date?: Date;
}
export default function ChartTile({
title,
value,
trend,
data,
icon,
variant = 'line',
date
}: ChartTileProps) {
const { contentCardStyle } = useTimelineStyles(date);
// Convert data points to SVG coordinates
const createSmoothPath = () => {
const points = data.map((value, index) => {
const x = (index / (data.length - 1)) * 100;
const y = 100 - ((value - Math.min(...data)) / (Math.max(...data) - Math.min(...data))) * 100;
return [x, y];
});
let path = `M ${points[0][0]},${points[0][1]}`;
for (let i = 0; i < points.length - 1; i++) {
const current = points[i];
const next = points[i + 1];
const controlPoint1X = current[0] + (next[0] - current[0]) / 3;
const controlPoint2X = current[0] + 2 * (next[0] - current[0]) / 3;
path += ` C ${controlPoint1X},${current[1]} ${controlPoint2X},${next[1]} ${next[0]},${next[1]}`;
}
return path;
};
// Create bar chart elements
const createBars = () => {
const maxValue = Math.max(...data.map(Math.abs));
const barWidth = 8;
const spacing = (100 - (data.length * barWidth)) / (data.length - 1);
return data.map((value, index) => {
const x = index * (barWidth + spacing);
const height = Math.abs(value) / maxValue * 50;
const y = value > 0 ? 50 - height : 50;
return {
x,
y,
height,
isPositive: value > 0
};
});
};
return (
<div
className={`
flex flex-col justify-between
w-[320px] h-[380px]
${contentCardStyle}
rounded-[18px]
relative
overflow-hidden
transition-all duration-200
hover:scale-[1.02]
`}
>
{/* Header section with icon */}
<div className="p-4 space-y-4">
<div className="w-6 h-6">
{icon}
</div>
<div>
<div className="text-gray-600 dark:text-white/40 text-sm mb-1">{title}</div>
<div className="text-gray-900 dark:text-white text-2xl font-semibold">
{value}
{trend && <span className="ml-1 text-sm">{trend}</span>}
</div>
</div>
</div>
{/* Chart Container */}
<div className="w-full h-[160px]">
<svg
width="100%"
height="100%"
viewBox="0 0 100 100"
preserveAspectRatio="none"
className="relative z-10"
>
{variant === 'line' ? (
<>
<defs>
<linearGradient id="chart-gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#00CAF7" />
<stop offset="100%" stopColor="#0B54DE" />
</linearGradient>
</defs>
<path
d={createSmoothPath()}
style={{ stroke: 'url(#chart-gradient)' }}
className="stroke-[1.5] fill-none"
strokeLinecap="round"
strokeLinejoin="round"
/>
{/* Data points */}
{data.map((value, index) => {
const x = (index / (data.length - 1)) * 100;
const y = 100 - ((value - Math.min(...data)) / (Math.max(...data) - Math.min(...data))) * 100;
return (
<circle
key={index}
cx={x}
cy={y}
r="2"
className="fill-blue-500"
/>
);
})}
</>
) : (
<>
{createBars().map((bar, index) => (
<rect
key={index}
x={bar.x}
y={bar.y}
width="8"
height={bar.height}
className={`${bar.isPositive ? 'fill-green-500' : 'fill-red-500'} opacity-80`}
rx="4"
/>
))}
</>
)}
</svg>
</div>
</div>
);
}

80
ui-v2/src/components/ClockTile.tsx Normal file
View File

@@ -0,0 +1,80 @@
import React, { useState, useEffect } from 'react';
import { useTimelineStyles } from '../hooks/useTimelineStyles';
import waveBg from '../assets/backgrounds/wave-bg.png';
interface ClockCardProps {
date?: Date;
}
export default function ClockTile({ date }: ClockCardProps) {
const { contentCardStyle, isPastDate } = useTimelineStyles(date);
const [currentTime, setCurrentTime] = useState(new Date());
// Don't render for past dates
if (isPastDate) {
return null;
}
// Update time every second for current day
useEffect(() => {
const timer = setInterval(() => {
setCurrentTime(new Date());
}, 1000);
return () => clearInterval(timer);
}, []);
// Format hours (12-hour format)
const hours = currentTime.getHours() % 12 || 12;
const minutes = currentTime.getMinutes().toString().padStart(2, '0');
const period = currentTime.getHours() >= 12 ? 'PM' : 'AM';
// Format day name
const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const dayName = dayNames[currentTime.getDay()];
return (
<div
className={`
flex flex-col justify-between
p-4
w-[213px] h-[213px]
${contentCardStyle}
rounded-[18px]
relative
overflow-hidden
group
`}
>
{/* Background Image with Gradient Overlay */}
<div
className="absolute inset-0 bg-cover bg-center bg-no-repeat transition-opacity duration-500"
style={{
backgroundImage: `url(${waveBg})`,
opacity: 0.8
}}
/>
{/* Gradient Overlay */}
<div
className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"
/>
{/* Time Display */}
<div className="flex flex-col items-start mt-auto relative z-10">
<div className="flex items-baseline">
<span className="font-['Cash_Sans'] text-[48px] font-light text-white leading-none">
{hours}:{minutes}
</span>
<span className="ml-1 font-['Cash_Sans'] text-xl font-light text-white">
{period}
</span>
</div>
<span className="text-sm text-white/80 mt-1">
{dayName}
</span>
</div>
</div>
);
}

36
ui-v2/src/components/GooseLogo.tsx
View File

@@ -1,36 +0,0 @@
import { FC } from 'react';
import { Goose, Rain } from './icons/Goose';
interface GooseLogoProps {
className?: string;
size?: 'default' | 'small';
hover?: boolean;
}
const GooseLogo: FC<GooseLogoProps> = ({ className = '', size = 'default', hover = true }) => {
const sizes = {
default: {
frame: 'w-16 h-16',
rain: 'w-[275px] h-[275px]',
goose: 'w-16 h-16',
},
small: {
frame: 'w-8 h-8',
rain: 'w-[150px] h-[150px]',
goose: 'w-8 h-8',
},
};
return (
<div
className={`${className} ${sizes[size].frame} ${hover ? 'group/with-hover' : ''} relative overflow-hidden`}
>
<Rain
className={`${sizes[size].rain} absolute left-0 bottom-0 ${hover ? 'opacity-0 group-hover/with-hover:opacity-100' : ''} transition-all duration-300 z-1`}
/>
<Goose className={`${sizes[size].goose} absolute left-0 bottom-0 z-2`} />
</div>
);
};
export default GooseLogo;

65
ui-v2/src/components/HighlightTile.tsx Normal file
View File

@@ -0,0 +1,65 @@
import React from 'react';
import { useTimelineStyles } from '../hooks/useTimelineStyles';
interface HighlightTileProps {
title: string;
value: string;
icon: React.ReactNode;
subtitle?: string;
date?: Date;
accentColor?: string;
}
export default function HighlightTile({
title,
value,
icon,
subtitle,
date,
accentColor = '#00CAF7'
}: HighlightTileProps) {
const { contentCardStyle } = useTimelineStyles(date);
return (
<div
className={`
flex flex-col justify-between
w-[320px] h-[280px]
${contentCardStyle}
rounded-[18px]
relative
overflow-hidden
transition-all duration-200
hover:scale-[1.02]
`}
>
{/* Background accent */}
<div
className="absolute inset-0 opacity-5"
style={{ background: `radial-gradient(circle at top right, ${accentColor}, transparent 70%)` }}
/>
{/* Content */}
<div className="p-4 h-full flex flex-col justify-between relative z-10">
<div className="w-6 h-6">
{icon}
</div>
<div>
<div className="text-gray-600 dark:text-white/40 text-sm mb-1">{title}</div>
<div
className="text-gray-900 dark:text-white text-2xl font-semibold"
style={{ color: accentColor }}
>
{value}
</div>
{subtitle && (
<div className="text-gray-500 dark:text-white/60 text-sm mt-1">
{subtitle}
</div>
)}
</div>
</div>
</div>
);
}

81
ui-v2/src/components/ListTile.tsx Normal file
View File

@@ -0,0 +1,81 @@
import React from 'react';
import { useTimelineStyles } from '../hooks/useTimelineStyles';
interface ListItem {
text: string;
value?: string;
color?: string;
}
interface ListTileProps {
title: string;
icon: React.ReactNode;
items: ListItem[];
date?: Date;
}
export default function ListTile({
title,
icon,
items,
date
}: ListTileProps) {
const { contentCardStyle } = useTimelineStyles(date);
return (
<div
className={`
flex flex-col
w-[320px] h-[420px]
${contentCardStyle}
rounded-[18px]
relative
overflow-hidden
transition-all duration-200
hover:scale-[1.02]
`}
>
{/* Header */}
<div className="p-4">
<div className="w-6 h-6 mb-4">
{icon}
</div>
<div className="text-gray-600 dark:text-white/40 text-sm mb-4">
{title}
</div>
</div>
{/* List */}
<div className="flex-1 overflow-y-auto px-4 pb-4">
<div className="space-y-3">
{items.map((item, index) => (
<div
key={index}
className="flex items-center justify-between"
>
<div className="flex items-center space-x-2">
<div
className={`w-2 h-2 rounded-full ${
item.color ? '' : 'bg-gray-400 dark:bg-white/40'
}`}
style={item.color ? { backgroundColor: item.color } : {}}
/>
<span className="text-sm text-gray-600 dark:text-white/80">
{item.text}
</span>
</div>
{item.value && (
<span
className="text-sm font-medium"
style={item.color ? { color: item.color } : {}}
>
{item.value}
</span>
)}
</div>
))}
</div>
</div>
</div>
);
}

123
ui-v2/src/components/PieChartTile.tsx Normal file
View File

@@ -0,0 +1,123 @@
import React from 'react';
import { useTimelineStyles } from '../hooks/useTimelineStyles';
interface PieChartSegment {
value: number;
color: string;
label: string;
}
interface PieChartTileProps {
title: string;
icon: React.ReactNode;
segments: PieChartSegment[];
date?: Date;
}
export default function PieChartTile({
title,
icon,
segments,
date
}: PieChartTileProps) {
const { contentCardStyle } = useTimelineStyles(date);
const total = segments.reduce((sum, segment) => sum + segment.value, 0);
let currentAngle = 0;
const createPieSegments = () => {
return segments.map((segment, index) => {
const startAngle = currentAngle;
const percentage = segment.value / total;
const angle = percentage * 360;
currentAngle += angle;
const startX = Math.cos((startAngle - 90) * Math.PI / 180) * 32 + 50;
const startY = Math.sin((startAngle - 90) * Math.PI / 180) * 32 + 50;
const endX = Math.cos((currentAngle - 90) * Math.PI / 180) * 32 + 50;
const endY = Math.sin((currentAngle - 90) * Math.PI / 180) * 32 + 50;
const largeArcFlag = angle > 180 ? 1 : 0;
const d = [
`M 50 50`,
`L ${startX} ${startY}`,
`A 32 32 0 ${largeArcFlag} 1 ${endX} ${endY}`,
'Z'
].join(' ');
return {
path: d,
color: segment.color,
label: segment.label,
percentage: (percentage * 100).toFixed(1)
};
});
};
const pieSegments = createPieSegments();
return (
<div
className={`
flex flex-col
w-[320px] h-[380px]
${contentCardStyle}
rounded-[18px]
relative
overflow-hidden
transition-all duration-200
hover:scale-[1.02]
`}
>
{/* Header */}
<div className="p-4">
<div className="w-6 h-6 mb-4">
{icon}
</div>
<div className="text-gray-600 dark:text-white/40 text-sm">
{title}
</div>
</div>
{/* Pie Chart */}
<div className="flex-1 flex flex-col items-center">
<div className="relative w-[150px] h-[150px]">
<svg
viewBox="0 0 100 100"
className="w-full h-full transform -rotate-90"
>
{pieSegments.map((segment, index) => (
<path
key={index}
d={segment.path}
fill={segment.color}
className="transition-all duration-200 hover:opacity-90"
/>
))}
</svg>
</div>
{/* Legend */}
<div className="mt-4 px-4 w-full space-y-2">
{pieSegments.map((segment, index) => (
<div key={index} className="flex items-center justify-between">
<div className="flex items-center">
<div
className="w-3 h-3 rounded-full mr-2"
style={{ backgroundColor: segment.color }}
/>
<span className="text-sm text-gray-600 dark:text-white/60">
{segment.label}
</span>
</div>
<span className="text-sm font-medium text-gray-900 dark:text-white">
{segment.percentage}%
</span>
</div>
))}
</div>
</div>
</div>
);
}

413
ui-v2/src/components/Timeline.tsx Normal file
View File

@@ -0,0 +1,413 @@
import React, { useRef, useMemo, useEffect } from 'react';
import ChartTile from './ChartTile';
import HighlightTile from './HighlightTile';
import PieChartTile from './PieChartTile';
import ListTile from './ListTile';
import ClockTile from './ClockTile';
import TimelineDots from './TimelineDots';
import { ChartLineIcon, ChartBarIcon, PieChartIcon, ListIcon, StarIcon, TrendingUpIcon } from './icons';
const generateRandomData = (length: number) => Array.from({ length }, () => Math.floor(Math.random() * 100));
const generateTileData = (date: Date) => {
const isToday = new Date().toDateString() === date.toDateString();
return {
left: [
// Performance metrics
{
type: 'chart' as const,
props: {
title: 'Daily Activity',
value: '487',
trend: '↑ 12%',
data: generateRandomData(7),
icon: <ChartLineIcon />,
variant: 'line' as const,
date
}
},
{
type: 'highlight' as const,
props: {
title: 'Achievement',
value: isToday ? 'New Record!' : 'Great Work',
icon: <StarIcon />,
subtitle: isToday ? 'Personal best today' : 'Keep it up',
date,
accentColor: '#FFB800'
}
},
{
type: 'pie' as const,
props: {
title: 'Task Distribution',
icon: <PieChartIcon />,
segments: [
{ value: 45, color: '#00CAF7', label: 'Completed' },
{ value: 35, color: '#FFB800', label: 'In Progress' },
{ value: 20, color: '#FF4444', label: 'Pending' }
],
date
}
},
// Additional metrics
{
type: 'chart' as const,
props: {
title: 'Response Time',
value: '245ms',
trend: '↓ 18%',
data: generateRandomData(7),
icon: <ChartBarIcon />,
variant: 'bar' as const,
date
}
},
{
type: 'highlight' as const,
props: {
title: 'User Satisfaction',
value: '98%',
icon: <StarIcon />,
subtitle: 'Based on feedback',
date,
accentColor: '#4CAF50'
}
},
{
type: 'list' as const,
props: {
title: 'Top Priorities',
icon: <ListIcon />,
items: [
{ text: 'Project Alpha', value: '87%', color: '#00CAF7' },
{ text: 'Team Meeting', value: '2:30 PM' },
{ text: 'Review Code', value: '13', color: '#FFB800' },
{ text: 'Deploy Update', value: 'Done', color: '#4CAF50' }
],
date
}
},
// System metrics
{
type: 'chart' as const,
props: {
title: 'System Load',
value: '42%',
trend: '↑ 5%',
data: generateRandomData(7),
icon: <ChartLineIcon />,
variant: 'line' as const,
date
}
},
{
type: 'pie' as const,
props: {
title: 'Storage Usage',
icon: <PieChartIcon />,
segments: [
{ value: 60, color: '#4CAF50', label: 'Free' },
{ value: 25, color: '#FFB800', label: 'Used' },
{ value: 15, color: '#FF4444', label: 'System' }
],
date
}
}
],
right: [
// Performance metrics
{
type: 'chart' as const,
props: {
title: 'Performance',
value: '92%',
trend: '↑ 8%',
data: generateRandomData(7),
icon: <ChartBarIcon />,
variant: 'bar' as const,
date
}
},
// Clock tile
{
type: 'clock' as const,
props: {
title: 'Current Time',
date
}
},
{
type: 'highlight' as const,
props: {
title: 'Efficiency',
value: '+28%',
icon: <TrendingUpIcon />,
subtitle: 'Above target',
date,
accentColor: '#4CAF50'
}
},
{
type: 'pie' as const,
props: {
title: 'Resource Usage',
icon: <PieChartIcon />,
segments: [
{ value: 55, color: '#4CAF50', label: 'Available' },
{ value: 30, color: '#FFB800', label: 'In Use' },
{ value: 15, color: '#FF4444', label: 'Reserved' }
],
date
}
},
// Updates and notifications
{
type: 'list' as const,
props: {
title: 'Recent Updates',
icon: <ListIcon />,
items: [
{ text: 'System Update', value: 'Complete', color: '#4CAF50' },
{ text: 'New Features', value: '3', color: '#00CAF7' },
{ text: 'Bug Fixes', value: '7', color: '#FFB800' },
{ text: 'Performance', value: '+15%', color: '#4CAF50' }
],
date
}
},
// Additional metrics
{
type: 'chart' as const,
props: {
title: 'User Activity',
value: '1,247',
trend: '↑ 23%',
data: generateRandomData(7),
icon: <ChartLineIcon />,
variant: 'line' as const,
date
}
},
{
type: 'highlight' as const,
props: {
title: 'New Users',
value: '+156',
icon: <TrendingUpIcon />,
subtitle: 'Last 24 hours',
date,
accentColor: '#00CAF7'
}
},
// System health
{
type: 'pie' as const,
props: {
title: 'API Health',
icon: <PieChartIcon />,
segments: [
{ value: 75, color: '#4CAF50', label: 'Healthy' },
{ value: 20, color: '#FFB800', label: 'Warning' },
{ value: 5, color: '#FF4444', label: 'Critical' }
],
date
}
},
{
type: 'list' as const,
props: {
title: 'System Status',
icon: <ListIcon />,
items: [
{ text: 'Main API', value: 'Online', color: '#4CAF50' },
{ text: 'Database', value: '98%', color: '#00CAF7' },
{ text: 'Cache', value: 'Synced', color: '#4CAF50' },
{ text: 'CDN', value: 'Active', color: '#4CAF50' }
],
date
}
}
]
};
};
export default function Timeline() {
const containerRef = useRef<HTMLDivElement>(null);
const sectionRefs = useRef<(HTMLDivElement | null)[]>([]);
const sections = useMemo(() => {
const result = [];
const today = new Date();
for (let i = 0; i <= 29; i++) {
const date = new Date(today);
date.setDate(today.getDate() - i);
const tileData = generateTileData(date);
result.push({
date,
isToday: i === 0,
leftTiles: tileData.left,
rightTiles: tileData.right
});
}
return result;
}, []);
// Function to center the timeline in a section
const centerTimeline = (sectionElement: HTMLDivElement) => {
if (!sectionElement) return;
requestAnimationFrame(() => {
const totalWidth = sectionElement.scrollWidth;
const viewportWidth = sectionElement.clientWidth;
const scrollToX = Math.max(0, (totalWidth - viewportWidth) / 2);
sectionElement.scrollTo({
left: scrollToX,
behavior: 'smooth'
});
});
};
useEffect(() => {
// Create the intersection observer
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const section = entry.target as HTMLDivElement;
centerTimeline(section);
}
});
},
{
threshold: 0.5,
rootMargin: '0px'
}
);
// Add resize handler
const handleResize = () => {
// Find the currently visible section
const visibleSection = sectionRefs.current.find(section => {
if (!section) return false;
const rect = section.getBoundingClientRect();
const viewportHeight = window.innerHeight;
// Check if the section is mostly visible in the viewport
return rect.top >= -viewportHeight / 2 && rect.bottom <= viewportHeight * 1.5;
});
if (visibleSection) {
centerTimeline(visibleSection);
}
};
// Add resize event listener
window.addEventListener('resize', handleResize);
// Observe all sections
sectionRefs.current.forEach((section) => {
if (section) {
observer.observe(section);
centerTimeline(section);
}
});
// Cleanup function
return () => {
window.removeEventListener('resize', handleResize);
sectionRefs.current.forEach((section) => {
if (section) {
observer.unobserve(section);
}
});
};
}, []);
const renderTile = (tile: any, index: number) => {
switch (tile.type) {
case 'chart':
return <ChartTile key={index} {...tile.props} />;
case 'highlight':
return <HighlightTile key={index} {...tile.props} />;
case 'pie':
return <PieChartTile key={index} {...tile.props} />;
case 'list':
return <ListTile key={index} {...tile.props} />;
case 'clock':
return <ClockTile key={index} {...tile.props} />;
default:
return null;
}
};
return (
<div
ref={containerRef}
className="h-screen overflow-y-scroll overflow-x-hidden snap-y snap-mandatory relative scrollbar-hide"
>
{sections.map((section, index) => (
<div
key={index}
ref={el => sectionRefs.current[index] = el}
className="h-screen relative snap-center snap-always overflow-x-scroll snap-x snap-mandatory scrollbar-hide"
>
<div className="relative min-w-[calc(200vw+100px)] h-full flex items-center">
{/* Main flex container */}
<div className="w-full h-full flex">
{/* Left Grid */}
<div className="w-screen p-4 mt-6 overflow-hidden">
<div className="ml-auto mr-0 flex flex-wrap gap-4 content-start justify-end" style={{ width: 'min(720px, 90%)' }}>
{section.leftTiles.map((tile, i) => (
<div key={i} className="w-[calc(50%-8px)]">
{renderTile(tile, i)}
</div>
))}
</div>
</div>
{/* Center Timeline */}
<div className="w-100px relative flex flex-col items-center h-screen">
{/* Upper Timeline Dots */}
<TimelineDots height="calc(50vh - 96px)" isUpper={true} isCurrentDay={section.isToday} />
{/* Date Display */}
<div className="bg-white p-4 rounded z-[3] flex flex-col items-center transition-opacity">
<div className={`font-['Cash_Sans'] text-3xl font-light ${section.isToday ? 'opacity-100' : 'opacity-20'}`}>
{section.date.toLocaleString('default', { month: 'short' })}
</div>
<div className={`font-['Cash_Sans'] text-[64px] font-light leading-none ${section.isToday ? 'opacity-100' : 'opacity-20'}`}>
{section.date.getDate()}
</div>
<div className={`font-['Cash_Sans'] text-sm font-light mt-1 ${section.isToday ? 'opacity-100' : 'opacity-20'}`}>
{section.date.toLocaleString('default', { weekday: 'long' })}
</div>
</div>
{/* Lower Timeline Dots */}
<TimelineDots height="calc(50vh - 96px)" isUpper={false} isCurrentDay={section.isToday} />
</div>
{/* Right Grid */}
<div className="w-screen p-4 mt-6 overflow-hidden">
<div className="flex flex-wrap gap-4 content-start" style={{ width: 'min(720px, 90%)' }}>
{section.rightTiles.map((tile, i) => (
<div key={i} className="w-[calc(50%-8px)]">
{renderTile(tile, i)}
</div>
))}
</div>
</div>
</div>
</div>
</div>
))}
</div>
);
}

31
ui-v2/src/components/TimelineContext.tsx Normal file
View File

@@ -0,0 +1,31 @@
import React, { createContext, useContext, useState, useCallback } from 'react';
interface TimelineContextType {
currentDate: Date;
setCurrentDate: (date: Date) => void;
isCurrentDate: (date: Date) => boolean;
}
const TimelineContext = createContext<TimelineContextType | undefined>(undefined);
export function TimelineProvider({ children }: { children: React.ReactNode }) {
const [currentDate, setCurrentDate] = useState(new Date());
const isCurrentDate = useCallback((date: Date) => {
return date.toDateString() === new Date().toDateString();
}, []);
return (
<TimelineContext.Provider value={{ currentDate, setCurrentDate, isCurrentDate }}>
{children}
</TimelineContext.Provider>
);
}
export function useTimeline() {
const context = useContext(TimelineContext);
if (context === undefined) {
throw new Error('useTimeline must be used within a TimelineProvider');
}
return context;
}

96
ui-v2/src/components/TimelineDots.tsx Normal file
View File

@@ -0,0 +1,96 @@
import React, { useMemo } from 'react';
interface TimelineDotsProps {
height: number | string;
isUpper?: boolean;
isCurrentDay?: boolean;
}
interface Dot {
top: string;
size: number;
opacity: number;
}
export default function TimelineDots({ height, isUpper = false, isCurrentDay = false }: TimelineDotsProps) {
// Generate random dots with clusters
const dots = useMemo(() => {
const generateDots = () => {
const dots: Dot[] = [];
const numDots = Math.floor(Math.random() * 8) + 8; // 8-15 dots
// Create 2-3 cluster points
const clusterPoints = Array.from({ length: Math.floor(Math.random() * 2) + 2 },
() => Math.random() * 100);
for (let i = 0; i < numDots; i++) {
// Decide if this dot should be part of a cluster
const isCluster = Math.random() < 0.7; // 70% chance of being in a cluster
let top;
if (isCluster) {
// Pick a random cluster point and add some variation
const clusterPoint = clusterPoints[Math.floor(Math.random() * clusterPoints.length)];
top = clusterPoint + (Math.random() - 0.5) * 15; // ±7.5% variation
} else {
top = Math.random() * 100;
}
// Ensure dot is within bounds
top = Math.max(5, Math.min(95, top));
dots.push({
top: `${top}%`,
size: Math.random() * 2 + 2, // 2-4px
opacity: Math.random() * 0.5 + 0.2, // 0.2-0.7 opacity
});
}
return dots;
};
return generateDots();
}, []); // Empty dependency array means this only runs once
return (
<div
className="flex h-full left-1/2 -translate-x-[0.375px] flex flex-col items-center"
style={{
height: height,
bottom: isUpper ? 'calc(50% + 96px)' : '0',
top: isUpper ? undefined : 'calc(50% + 96px)'
}}
>
{/* Main line */}
<div className="w-[0.75px] h-full bg-black/10 dark:bg-white/10 relative">
{/* Top dot for current day */}
{isUpper && isCurrentDay && (
<div
className="absolute rounded-full bg-black dark:bg-white"
style={{
width: '4px',
height: '4px',
left: '-1.625px', // Center 4px dot on 0.75px line
top: '0',
transform: 'translateY(-50%)'
}}
/>
)}
{/* Random dots */}
{dots.map((dot, index) => (
<div
key={index}
className="absolute rounded-full bg-black/40 dark:bg-white/40"
style={{
width: `${dot.size}px`,
height: `${dot.size}px`,
left: `${-(dot.size - 0.75) / 2}px`, // Center dot on the line
top: dot.top,
opacity: dot.opacity,
}}
/>
))}
</div>
</div>
);
};

130
ui-v2/src/components/ValueCard.tsx Normal file
View File

@@ -0,0 +1,130 @@
import React from 'react';
interface BrandCardProps {
date?: Date;
className?: string;
}
export default function BrandCard({ }: BrandCardProps) {
const isToday = date ? new Date().toDateString() === date.toDateString() : true;
// Get a consistent message for each date
const getPastDayMessage = (date: Date) => {
// Use the date's day as an index to select a message
const index = date.getDate() % pastDayMessages.length;
return pastDayMessages[index];
};
// Get message for past days
const pastMessage = date ? getPastDayMessage(date) : pastDayMessages[0];
return (
<div
className={`
flex flex-col justify-between
p-4
w-[366px] h-[256px]
${isToday
? 'bg-textStandard dark:bg-white'
: 'bg-gray-400/40 dark:bg-gray-400/40'
}
rounded-[18px]
relative
overflow-hidden
transition-all duration-200
shadow-[0_0_13.7px_rgba(0,0,0,0.04)]
dark:shadow-[0_0_24px_rgba(255,255,255,0.02)]
${className}
`}
>
{/* Content */}
<div className="relative z-10 w-full">
{/* Logo */}
<div className={`
w-6 h-6
${isToday
? '[&_path]:fill-current text-white dark:text-gray-900'
: '[&_path]:fill-current text-white/60 dark:text-white/60'
}
`}>
<svg width="24" height="23" viewBox="0 0 24 23" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M0.5 10.5733C0.5 8.19815 2.41385 6.27271 4.77471 6.27271H6.67984C9.04069 6.27271 10.9545 8.19816 10.9545 10.5733V18.6994C10.9545 21.0745 9.04069 23 6.67983 23H4.77471C2.41385 23 0.5 21.0745 0.5 18.6994V10.5733Z" />
<path d="M6.67977 22.6416V23H4.77477V22.6416H6.67977ZM10.5983 18.6993V10.5733C10.5983 8.3961 8.84392 6.63109 6.67977 6.63109H4.77477C2.61062 6.63109 0.856231 8.3961 0.856231 10.5733V18.6993C0.856231 20.8766 2.61062 22.6416 4.77477 22.6416V23L4.66449 22.9986C2.39119 22.9407 0.558919 21.0974 0.501392 18.8103L0.5 18.6993V10.5733C0.5 8.23526 2.35457 6.33295 4.66449 6.27411L4.77477 6.27271H6.67977L6.7904 6.27411C9.10023 6.33306 10.9545 8.23533 10.9545 10.5733V18.6993L10.9532 18.8103C10.8956 21.0973 9.06361 22.9406 6.7904 22.9986L6.67977 23V22.6416C8.84392 22.6416 10.5983 20.8766 10.5983 18.6993Z" />
<path d="M13.0453 4.27471C13.0453 1.91385 14.9592 0 17.3201 0H19.2252C21.586 0 23.4999 1.91385 23.4999 4.27471V6.17984C23.4999 8.54069 21.586 10.4545 19.2252 10.4545H17.3201C14.9592 10.4545 13.0453 8.54069 13.0453 6.17983V4.27471Z" />
<path d="M19.2251 10.0983V10.4545H17.3201V10.0983H19.2251ZM23.1437 6.17977V4.27477C23.1437 2.11062 21.3893 0.356231 19.2251 0.356231H17.3201C15.156 0.356231 13.4016 2.11062 13.4016 4.27477V6.17977C13.4016 8.34392 15.156 10.0983 17.3201 10.0983V10.4545L17.2098 10.4532C14.9366 10.3956 13.1044 8.56358 13.0467 6.2904L13.0453 6.17977V4.27477C13.0453 1.95075 14.8999 0.0598847 17.2098 0.00139153L17.3201 0H19.2251L19.3357 0.00139153C21.6456 0.0599881 23.4999 1.95082 23.4999 4.27477V6.17977L23.4985 6.2904C23.4408 8.56351 21.6089 10.3955 19.3357 10.4532L19.2251 10.4545V10.0983C21.3893 10.0983 23.1437 8.34392 23.1437 6.17977Z" />
<path d="M19.3182 14.6363C19.3182 13.4815 20.2543 12.5454 21.4091 12.5454V12.5454C22.5639 12.5454 23.5 13.4815 23.5 14.6363V14.6363C23.5 15.7911 22.5639 16.7272 21.4091 16.7272V16.7272C20.2543 16.7272 19.3182 15.7911 19.3182 14.6363V14.6363Z" />
<path d="M23.1522 14.6361C23.1521 13.6736 22.3715 12.8932 21.4089 12.8932C20.4464 12.8933 19.6661 13.6736 19.666 14.6361C19.666 15.5988 20.4464 16.3793 21.4089 16.3794V16.7272L21.3016 16.7245C20.2324 16.6704 19.3751 15.813 19.3209 14.7438L19.3182 14.6361C19.3183 13.4815 20.2543 12.5455 21.4089 12.5454L21.5166 12.5481C22.6213 12.6041 23.5 13.5175 23.5 14.6361L23.4973 14.7438C23.4413 15.8486 22.5276 16.7272 21.4089 16.7272V16.3794C22.3716 16.3794 23.1522 15.5988 23.1522 14.6361Z" />
<path d="M13.0453 14.6363C13.0453 13.4815 13.9815 12.5454 15.1363 12.5454V12.5454C16.291 12.5454 17.2272 13.4815 17.2272 14.6363V14.6363C17.2272 15.7911 16.291 16.7272 15.1363 16.7272V16.7272C13.9815 16.7272 13.0453 15.7911 13.0453 14.6363V14.6363Z" />
<path d="M16.8793 14.6361C16.8793 13.6736 16.0987 12.8932 15.1361 12.8932C14.1735 12.8933 13.3932 13.6736 13.3932 14.6361C13.3932 15.5988 14.1735 16.3793 15.1361 16.3794V16.7272L15.0287 16.7245C13.9596 16.6704 13.1023 15.813 13.0481 14.7438L13.0453 14.6361C13.0454 13.4815 13.9814 12.5455 15.1361 12.5454L15.2438 12.5481C16.3485 12.6041 17.2271 13.5175 17.2272 14.6361L17.2244 14.7438C17.1685 15.8486 16.2548 16.7272 15.1361 16.7272V16.3794C16.0987 16.3794 16.8793 15.5988 16.8793 14.6361Z" />
<path d="M0.5 2.09091C0.5 0.936132 1.45869 0 2.64129 0H8.81325C9.99586 0 10.9545 0.936132 10.9545 2.09091V2.09091C10.9545 3.24569 9.99586 4.18182 8.81325 4.18182H2.64129C1.45869 4.18182 0.5 3.24569 0.5 2.09091V2.09091Z" />
<path d="M8.81333 3.83398V4.18182H2.64121V3.83398H8.81333ZM10.5983 2.09074C10.5983 1.12815 9.79917 0.347834 8.81333 0.347834H2.64121C1.65542 0.347891 0.85629 1.12818 0.856231 2.09074C0.856231 3.05334 1.65538 3.83393 2.64121 3.83398V4.18182L2.53128 4.1791C1.43629 4.12498 0.558276 3.26758 0.502783 2.19842L0.5 2.09074C0.500057 0.972081 1.39984 0.0586407 2.53128 0.00271745L2.64121 0H8.81333L8.92361 0.00271745C10.055 0.0587386 10.9545 0.972147 10.9545 2.09074L10.9518 2.19842C10.8963 3.26751 10.0185 4.12489 8.92361 4.1791L8.81333 4.18182V3.83398C9.79921 3.83398 10.5983 3.05338 10.5983 2.09074Z" />
<path d="M13.1735 19.8579C13.5338 19.0233 14.546 18.6107 15.4505 18.9214L15.4934 18.9368L16.8286 19.4315L16.9187 19.4638C17.854 19.786 18.8876 19.7689 19.8114 19.4136L21.0304 18.9449L21.0731 18.9291C21.9732 18.6074 22.9911 19.0079 23.3631 19.838C23.735 20.6682 23.3225 21.6185 22.4412 21.9819L22.3989 21.9989L21.1798 22.4675C19.3933 23.1545 17.3909 23.1771 15.5885 22.5328L15.5029 22.5016L14.1678 22.0069L14.1252 21.9906C13.2389 21.6378 12.8131 20.6924 13.1735 19.8579Z" />
</g>
</svg>
</div>
</div>
{/* Text content - bottom */}
<div className="relative z-10 w-full flex flex-col">
{isToday ? (
<>
{/* Today's content */}
<h2
className={`
font-['Cash_Sans'] font-semibold text-base
text-white dark:text-gray-600
tracking-[0.08em] max-w-[565px]
mb-2
transition-colors
`}
>
Good morning
</h2>
<h1
style={{ fontWeight: 200 }}
className={`
font-['Cash_Sans'] text-[32px]
text-white dark:text-gray-600
leading-tight max-w-[565px]
tracking-normal
transition-colors
`}
>
You've got 3 major updates this morning
</h1>
</>
) : (
<>
{/* Past/Future date content */}
<h2
className={`
font-['Cash_Sans'] font-semibold text-base
text-white/60 dark:text-white/60
tracking-[0.08em] max-w-[565px]
mb-2
transition-colors
`}
>
{pastMessage?.title || 'Hello'}
</h2>
<h1
style={{ fontWeight: 200 }}
className={`
font-['Cash_Sans'] text-[32px]
text-white/60 dark:text-white/60
leading-tight max-w-[565px]
tracking-normal
transition-colors
`}
>
{pastMessage?.message || 'Great work'}
</h1>
</>
)}
</div>
</div>
);
}

37
ui-v2/src/components/icons.tsx Normal file
View File

@@ -0,0 +1,37 @@
import React from 'react';
export const ChartLineIcon = () => (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 16L8 11L13 16L21 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
export const ChartBarIcon = () => (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 20V4H16V20H20ZM14 20V10H10V20H14ZM8 20V14H4V20H8Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
export const PieChartIcon = () => (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2V12H22C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
export const ListIcon = () => (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 6H21M8 12H21M8 18H21M3 6H3.01M3 12H3.01M3 18H3.01" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
export const StarIcon = () => (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
export const TrendingUpIcon = () => (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23 6L13.5 15.5L8.5 10.5L1 18M23 6H17M23 6V12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);

392
ui-v2/src/components/icons/Goose.tsx
View File

@@ -1,392 +0,0 @@
import { FC } from 'react';
interface IconProps {
className?: string;
}
export const Goose: FC<IconProps> = ({ className = '' }) => {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<g clipPath="url(#clip0_2096_5193)">
<path
d="M20.9093 19.3861L19.5185 18.2413C18.7624 17.619 18.1189 16.8713 17.6157 16.0313C16.9205 14.8706 15.9599 13.8912 14.8133 13.1735L14.2533 12.8475C14.0614 12.7141 13.9276 12.5062 13.9086 12.2716C13.8963 12.1204 13.9326 11.9852 14.0171 11.8662C14.3087 11.4553 15.896 9.74698 16.1722 9.51845C16.528 9.22442 16.9243 8.97987 17.2921 8.69986C17.3443 8.66 17.3968 8.62035 17.4485 8.57989C17.4503 8.57808 17.4529 8.57668 17.4545 8.57508C17.5725 8.48195 17.6838 8.383 17.7724 8.26563C18.2036 7.76631 18.195 7.3443 18.195 7.3443C18.195 7.3443 18.1954 7.3439 18.1956 7.3437C18.1497 7.23133 17.9847 6.88163 17.6492 6.71759C17.9458 6.71178 18.2805 6.82294 18.4323 6.97156C18.6148 6.68534 18.7328 6.49967 18.9162 6.18762C18.9599 6.11352 18.9831 5.97652 18.8996 5.89981C18.8996 5.89981 18.8992 5.89981 18.8988 5.89981C18.8988 5.89981 18.8988 5.8994 18.8988 5.899C18.8972 5.8974 18.8952 5.8962 18.8936 5.8946C18.892 5.893 18.891 5.89119 18.8892 5.88939C18.8892 5.88939 18.8888 5.88939 18.8884 5.88939C18.8884 5.88939 18.8884 5.88899 18.8884 5.88859C18.885 5.88518 18.8812 5.88258 18.8776 5.87938C18.8754 5.87717 18.8736 5.87457 18.8716 5.87217C18.8692 5.87016 18.8665 5.86836 18.8643 5.86616C18.8609 5.86275 18.8587 5.85855 18.8551 5.85534C18.8551 5.85534 18.8545 5.85514 18.8543 5.85534C18.8543 5.85534 18.8543 5.85494 18.8543 5.85454C18.8527 5.85294 18.8507 5.85174 18.8491 5.85013C18.8475 5.84853 18.8463 5.84653 18.8447 5.84493C18.8447 5.84493 18.8441 5.84473 18.8439 5.84493C18.8439 5.84493 18.8439 5.84453 18.8439 5.84413C18.7672 5.7606 18.6302 5.78384 18.5561 5.8275C18.1503 6.06625 17.7555 6.32322 17.3996 6.54855C17.3996 6.54855 16.9778 6.53973 16.4783 6.97116C16.3607 7.05989 16.2618 7.17125 16.1688 7.28902C16.167 7.29082 16.1654 7.29322 16.164 7.29503C16.1234 7.3465 16.0837 7.39898 16.0441 7.45145C15.7639 7.81939 15.5195 8.21556 15.2255 8.57128C14.9971 8.84768 13.2887 10.4348 12.8777 10.7264C12.7587 10.8109 12.6237 10.8474 12.4723 10.835C12.2379 10.8161 12.0298 10.6821 11.8965 10.4903L11.5704 9.93024C10.8527 8.78318 9.87332 7.82299 8.71264 7.12778C7.87262 6.62466 7.12514 5.98092 6.50264 5.22503L5.35778 3.83421C5.3013 3.76571 5.19314 3.77693 5.15268 3.85585C5.02249 4.10941 4.77393 4.64479 4.58346 5.36483C4.57885 5.38186 4.58286 5.39988 4.59407 5.4135C4.83082 5.69952 5.37901 6.32983 6.03196 6.863C6.07742 6.90005 6.04017 6.97336 5.98369 6.95774C5.42047 6.80432 4.87288 6.55796 4.46308 6.34805C4.42964 6.33103 4.38918 6.35226 4.38437 6.38951C4.32068 6.89985 4.30425 7.46027 4.37155 8.05112C4.37355 8.07035 4.38577 8.08697 4.4036 8.09479C4.87088 8.29808 5.61816 8.59311 6.40269 8.78078C6.45958 8.7944 6.45777 8.87632 6.40029 8.88733C5.78941 9.0023 5.14968 9.02794 4.62973 9.02113C4.59327 9.02073 4.56643 9.05518 4.57625 9.09023C4.6806 9.45896 4.822 9.8339 5.00847 10.2115C5.08559 10.3811 5.16951 10.5475 5.25944 10.7104C5.27486 10.7382 5.3047 10.7548 5.33655 10.7534C5.76577 10.7324 6.28452 10.6871 6.80608 10.595C6.89501 10.5794 6.94268 10.6964 6.86757 10.7466C6.51345 10.9834 6.13571 11.1873 5.7844 11.3551C5.73733 11.3777 5.72211 11.4378 5.75315 11.4797C5.96186 11.7625 6.19139 12.0301 6.44075 12.2794C6.44075 12.2794 7.66853 13.5441 7.70198 13.6432C8.41841 12.9096 9.59612 12.0964 10.8966 11.3864C9.15488 12.8036 8.18387 13.8499 7.69517 14.4444L7.35447 14.9225C7.17742 15.1708 7.02379 15.4346 6.89541 15.7112C6.46579 16.6356 5.75756 18.5051 5.75756 18.5051C5.70328 18.6515 5.74754 18.7959 5.84168 18.89C5.84388 18.8922 5.84609 18.8944 5.84849 18.8964C5.85069 18.8986 5.8527 18.901 5.8549 18.9032C5.94924 18.9976 6.09345 19.0416 6.23986 18.9874C6.23986 18.9874 8.10897 18.2791 9.03371 17.8495C9.31031 17.7211 9.57429 17.5673 9.82245 17.3905L10.349 17.0153C10.6278 16.8166 11.0096 16.8483 11.2517 17.0904L12.4655 18.3042C12.7148 18.5535 12.9824 18.7831 13.2652 18.9918C13.3073 19.0226 13.3672 19.0076 13.3898 18.9605C13.5579 18.6094 13.7618 18.2313 13.9983 17.8774C14.0486 17.8022 14.1657 17.8501 14.1499 17.9388C14.0576 18.4606 14.0127 18.9794 13.9915 19.4084C13.9899 19.44 14.0067 19.4701 14.0345 19.4855C14.1972 19.5756 14.3636 19.6595 14.5335 19.7364C14.911 19.9229 15.2862 20.0645 15.6547 20.1687C15.6897 20.1785 15.7242 20.1516 15.7238 20.1152C15.7168 19.595 15.7424 18.9553 15.8576 18.3446C15.8684 18.2869 15.9503 18.2851 15.9641 18.3422C16.1516 19.127 16.4466 19.8742 16.6501 20.3413C16.6579 20.3591 16.6744 20.3712 16.6938 20.3734C17.2847 20.4407 17.8451 20.4242 18.3554 20.3606C18.3929 20.3559 18.4141 20.3155 18.3969 20.2818C18.187 19.872 17.9406 19.3241 17.7872 18.7612C17.7718 18.7046 17.8449 18.6675 17.8819 18.713C18.4151 19.3659 19.0454 19.9141 19.3314 20.1508C19.345 20.1621 19.3633 20.1659 19.3801 20.1615C20.1003 19.9712 20.6357 19.7226 20.8891 19.5922C20.968 19.5518 20.9792 19.4436 20.9107 19.3871L20.9093 19.3861Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_2096_5193">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
);
};
export const Rain: FC<IconProps> = ({ className = '' }) => {
return (
<svg
width="103"
height="103"
viewBox="0 0 103 103"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<g id="wind">
<g id="1" className="animate-[wind_2s_linear_infinite]">
<path
id="Vector 42_2"
d="M66 33L62 37"
stroke="url(#paint10_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 41_2"
d="M70 43L68 45"
stroke="url(#paint11_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 51_2"
d="M60 34L59 35"
stroke="url(#paint12_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 43_2"
d="M56 47L52 51"
stroke="url(#paint13_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 46_2"
d="M98 1L94 5"
stroke="url(#paint14_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 47_2"
d="M102 11L100 13"
stroke="url(#paint15_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 48_2"
d="M88 15L84 19"
stroke="url(#paint16_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 45_2"
d="M76 26L72 30"
stroke="url(#paint17_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 49_2"
d="M87 28L83 32"
stroke="url(#paint18_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 50_2"
d="M76 34L74 36"
stroke="url(#paint19_linear_2096_5587)"
strokeLinecap="round"
/>
</g>
<g id="2" className="animate-[wind_2s_linear_1s_infinite]">
<path
id="Vector 42"
d="M66 33L62 37"
stroke="url(#paint0_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 41"
d="M70 43L68 45"
stroke="url(#paint1_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 51"
d="M60 34L59 35"
stroke="url(#paint2_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 43"
d="M56 47L52 51"
stroke="url(#paint3_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 46"
d="M98 1L94 5"
stroke="url(#paint4_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 47"
d="M102 11L100 13"
stroke="url(#paint5_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 48"
d="M88 15L84 19"
stroke="url(#paint6_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 45"
d="M76 26L72 30"
stroke="url(#paint7_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 49"
d="M87 28L83 32"
stroke="url(#paint8_linear_2096_5587)"
strokeLinecap="round"
/>
<path
id="Vector 50"
d="M76 34L74 36"
stroke="url(#paint9_linear_2096_5587)"
strokeLinecap="round"
/>
</g>
</g>
<defs>
<linearGradient
id="paint0_linear_2096_5587"
x1="64"
y1="32.9437"
x2="64"
y2="37.0563"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint1_linear_2096_5587"
x1="69"
y1="42.9719"
x2="69"
y2="45.0281"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint2_linear_2096_5587"
x1="59.5"
y1="33.9859"
x2="59.5"
y2="35.0141"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint3_linear_2096_5587"
x1="54"
y1="46.9437"
x2="54"
y2="51.0563"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint4_linear_2096_5587"
x1="96"
y1="0.943728"
x2="96"
y2="5.05625"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint5_linear_2096_5587"
x1="101"
y1="10.9719"
x2="101"
y2="13.0281"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint6_linear_2096_5587"
x1="86"
y1="14.9437"
x2="86"
y2="19.0563"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint7_linear_2096_5587"
x1="74"
y1="25.9437"
x2="74"
y2="30.0563"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint8_linear_2096_5587"
x1="85"
y1="27.9437"
x2="85"
y2="32.0563"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint9_linear_2096_5587"
x1="75"
y1="33.9719"
x2="75"
y2="36.0281"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint10_linear_2096_5587"
x1="64"
y1="32.9437"
x2="64"
y2="37.0563"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint11_linear_2096_5587"
x1="69"
y1="42.9719"
x2="69"
y2="45.0281"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint12_linear_2096_5587"
x1="59.5"
y1="33.9859"
x2="59.5"
y2="35.0141"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint13_linear_2096_5587"
x1="54"
y1="46.9437"
x2="54"
y2="51.0563"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint14_linear_2096_5587"
x1="96"
y1="0.943728"
x2="96"
y2="5.05625"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint15_linear_2096_5587"
x1="101"
y1="10.9719"
x2="101"
y2="13.0281"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint16_linear_2096_5587"
x1="86"
y1="14.9437"
x2="86"
y2="19.0563"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint17_linear_2096_5587"
x1="74"
y1="25.9437"
x2="74"
y2="30.0563"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint18_linear_2096_5587"
x1="85"
y1="27.9437"
x2="85"
y2="32.0563"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
<linearGradient
id="paint19_linear_2096_5587"
x1="75"
y1="33.9719"
x2="75"
y2="36.0281"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#EC5D2A" />
<stop offset="1" stopColor="#57B9AF" />
</linearGradient>
</defs>
</svg>
);
};

35
ui-v2/src/hooks/useTimelineStyles.ts Normal file
View File

@@ -0,0 +1,35 @@
import { useTimeline } from '../components/TimelineContext';
interface TimelineStyles {
isPastDate: boolean;
greetingCardStyle: {
background: string;
text: string;
};
contentCardStyle: string;
}
export function useTimelineStyles(date?: Date): TimelineStyles {
const { isCurrentDate } = useTimeline();
const isPastDate = date && date < new Date() && !isCurrentDate(date);
// Content cards match the Tasks Completed tile styling
const contentCardStyle = 'bg-white dark:bg-[#121212] shadow-[0_0_13.7px_rgba(0,0,0,0.04)] dark:shadow-[0_0_24px_rgba(255,255,255,0.02)]';
// Greeting card styles based on date
const greetingCardStyle = !isPastDate
? {
background: 'bg-textStandard', // Black background
text: 'text-white' // White text
}
: {
background: 'bg-gray-100', // Light grey background
text: 'text-gray-600' // Darker grey text
};
return {
isPastDate,
greetingCardStyle,
contentCardStyle
};
}

4
ui-v2/src/routeTree.ts
View File

@@ -1,8 +1,8 @@
import { createRouter } from '@tanstack/react-router';
import { rootRoute, indexRoute, aboutRoute } from './routes';
import { rootRoute, timelineRoute } from './routes';
const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);
const routeTree = rootRoute.addChildren([timelineRoute]);
export const router = createRouter({ routeTree });

5
ui-v2/src/routes/__root.tsx
View File

@@ -6,11 +6,8 @@ export const Route = createRootRoute({
<>
<div className="p-2 flex gap-2">
<Link to="/" className="[&.active]:font-bold">
Home
Timeline
</Link>{' '}
<Link to="/about" className="[&.active]:font-bold">
About
</Link>
</div>
<hr />
<Outlet />

21
ui-v2/src/routes/index.tsx
View File

@@ -1,28 +1,21 @@
import { createRootRoute, createRoute } from '@tanstack/react-router';
import App from '../App';
import Timeline from '../components/Timeline';
import { TimelineProvider } from '../components/TimelineContext';
export const rootRoute = createRootRoute({
component: App,
});
export const indexRoute = createRoute({
export const timelineRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/',
component: () => (
<div className="p-5">
<h2>Welcome to Goose v2</h2>
</div>
),
});
export const aboutRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/about',
component: () => (
<div className="p-5">
<h2>About Goose v2</h2>
<p>An AI assistant for developers</p>
<TimelineProvider>
<div className="flex flex-col h-full">
<Timeline />
</div>
</TimelineProvider>
),
});

1
ui-v2/tailwind.config.js
View File

@@ -1,6 +1,7 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'media', // Enable dark mode and use the system preference
theme: {
extend: {
colors: {