Implement Agent 6: Real-Time Updates feature for LocalGreenChain: - Add Socket.io server with room-based subscriptions - Create client-side hooks (useSocket, useLiveFeed, usePlantUpdates) - Add SocketProvider context for application-wide state - Implement UI components: - ConnectionStatus: Shows WebSocket connection state - LiveFeed: Real-time event feed display - NotificationToast: Toast notifications with auto-dismiss - LiveChart: Real-time data visualization - Add event type definitions and formatting utilities - Create socket API endpoint for WebSocket initialization - Add socket stats endpoint for monitoring - Extend tailwind with fadeIn/slideIn animations Integrates with existing EventStream SSE system for fallback.
30 lines
807 B
JavaScript
30 lines
807 B
JavaScript
module.exports = {
|
|
mode: "jit",
|
|
content: [
|
|
"./pages/**/*.{js,ts,jsx,tsx}",
|
|
"./components/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
animation: {
|
|
fadeIn: 'fadeIn 0.3s ease-in-out',
|
|
slideIn: 'slideIn 0.3s ease-out',
|
|
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0', transform: 'translateY(-10px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
slideIn: {
|
|
'0%': { opacity: '0', transform: 'translateX(20px)' },
|
|
'100%': { opacity: '1', transform: 'translateX(0)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
extend: {},
|
|
},
|
|
plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
|
|
}
|