+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/CountdownTimer.tsx b/frontend/src/components/CountdownTimer.tsx
new file mode 100644
index 0000000..bf08e4c
--- /dev/null
+++ b/frontend/src/components/CountdownTimer.tsx
@@ -0,0 +1,10 @@
+import { useCountdown } from '@/hooks/useCountdown';
+
+interface CountdownTimerProps {
+ expiresAt: string;
+}
+
+export function CountdownTimer({ expiresAt }: CountdownTimerProps) {
+ const timeLeft = useCountdown(expiresAt);
+ return {timeLeft} left to dissolve;
+}
diff --git a/frontend/src/components/EmotionFilterBar.tsx b/frontend/src/components/EmotionFilterBar.tsx
new file mode 100644
index 0000000..c73a9ce
--- /dev/null
+++ b/frontend/src/components/EmotionFilterBar.tsx
@@ -0,0 +1,34 @@
+import { cn } from '@/lib/utils';
+import { EmotionTag, EMOTION_TAGS } from '@/types';
+
+interface EmotionFilterBarProps {
+ selectedEmotion?: EmotionTag;
+ onSelectEmotion: (emotion?: EmotionTag) => void;
+}
+
+export function EmotionFilterBar({ selectedEmotion, onSelectEmotion }: EmotionFilterBarProps) {
+ const allEmotions: (EmotionTag | undefined)[] = [undefined, ...EMOTION_TAGS];
+
+ return (
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
new file mode 100644
index 0000000..7e95c69
--- /dev/null
+++ b/frontend/src/components/Layout.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { NavLink, useLocation, Link } from 'react-router-dom';
+import { Plus } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface LayoutProps {
+ children: React.ReactNode;
+}
+
+export function Layout({ children }: LayoutProps) {
+ const location = useLocation();
+
+ const navItems = [
+ { path: '/', label: 'The Stream' },
+ { path: '/my-dissolves', label: 'My Dissolves' },
+ ];
+
+ return (
+
+ {allEmotions.map((emotion, idx) => {
+ const label = emotion || 'All';
+ const isActive = selectedEmotion === emotion;
+ return (
+
+ );
+ })}
+
+
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/frontend/src/components/MyPostCard.tsx b/frontend/src/components/MyPostCard.tsx
new file mode 100644
index 0000000..c0f8e76
--- /dev/null
+++ b/frontend/src/components/MyPostCard.tsx
@@ -0,0 +1,74 @@
+import { motion } from 'framer-motion';
+import { Users, Timer, Volume2, Image, MessageSquare } from 'lucide-react';
+
+import { useApi } from '@/hooks/useApi';
+import type { Post } from '@/types';
+import { CountdownTimer } from './CountdownTimer';
+import { AudioPlayer } from './AudioPlayer';
+
+interface MyPostCardProps {
+ post: Post;
+}
+
+export function MyPostCard({ post }: MyPostCardProps) {
+ const { getMediaUrl } = useApi();
+
+ const cardVariants = {
+ initial: { opacity: 0, y: 20 },
+ animate: { opacity: 1, y: 0 },
+ exit: { opacity: 0, scale: 0.95 },
+ };
+
+ const renderContent = () => {
+ switch (post.content_type) {
+ case 'text':
+ return
+
+
+
+ Dissolve
+
+
+
+
+ {post.content_data}
; + case 'photo': + return
+ {renderContent()}
+
+
+
+
+
+
+ {getIcon()}
+ {post.emotion_tag}
+
+
+
+
+
+ {post.content_data}
; + case 'photo': + return
+ {renderContent()}
+
+
+
+
+ {getIcon()}
+ {post.emotion_tag}
+
+
+
+
+
+ Report Post
+Help us keep Dissolve a safe space. Why are you reporting this post?
+