[V0_FILE]typescriptreact:file="tailwind.config.js" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}"], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="types.ts" export type User = { id: number name: string handle: string avatar: string } export type Post = { id: number userId: number content: string time: string likes: number comments: number reposts: number isLiked: boolean isReposted: boolean } export type Comment = { id: number postId: number userId: number content: string time: string } [V0_FILE]typescriptreact:file="PostInteractions.tsx" import { Button } from "@/components/ui/button" import { MessageCircle, Repeat2, Heart, Share } from "lucide-react" import type { Post } from "./types" interface PostInteractionsProps { post: Post onLike: (postId: number) => void onRepost: (postId: number) => void onComment: (postId: number) => void } export function PostInteractions({ post, onLike, onRepost, onComment }: PostInteractionsProps) { return (

) } [V0_FILE]typescriptreact:file="CommentSection.tsx" "use client" import { useState } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import type { Comment } from "./types" interface CommentSectionProps { postId: number comments: (Comment & { name: string; handle: string; avatar: string })[] onAddComment: (postId: number, content: string) => void currentUserAvatar: string } export function CommentSection({ postId, comments, onAddComment, currentUserAvatar }: CommentSectionProps) { const [newComment, setNewComment] = useState("") const handleSubmitComment = () => { if (newComment.trim()) { onAddComment(postId, newComment) setNewComment("") } } return (

U setNewComment(e.target.value)} placeholder="Add a comment..." className="flex-grow" />

{comments.map((comment) => (

{comment.name[0]}

{comment.name} {comment.handle} {comment.time}

{comment.content}

))}

) } [V0_FILE]typescriptreact:file="userData.ts" import type { User } from "./types" export const users: User[] = [ { id: 1, name: "Paimon", handle: "@emergency_food", avatar: "/paimon.png" }, { id: 2, name: "Jean", handle: "@acting_grandmaster", avatar: "/jean.png" }, { id: 3, name: "Venti", handle: "@tone_deaf_bard", avatar: "/venti.png" }, { id: 4, name: "Lisa", handle: "@librarian", avatar: "/lisa.png" }, { id: 5, name: "Traveler", handle: "@protagonist", avatar: "/traveler.png" }, { id: 6, name: "Amber", handle: "@outrider", avatar: "/amber.png" }, { id: 7, name: "Kaeya", handle: "@cavalry_captain", avatar: "/kaeya.png" }, { id: 8, name: "Diluc", handle: "@dark_knight", avatar: "/diluc.png" }, { id: 9, name: "Razor", handle: "@wolf_boy", avatar: "/razor.png" }, { id: 10, name: "Barbara", handle: "@deaconess", avatar: "/barbara.png" }, ] export function searchUsers(query: string): User[] { const lowercaseQuery = query.toLowerCase() return users.filter( (user) => user.name.toLowerCase().includes(lowercaseQuery) || user.handle.toLowerCase().includes(lowercaseQuery), ) } export function getRandomUsers(count: number): User[] { const shuffled = [...users].sort(() => 0.5 - Math.random()) return shuffled.slice(0, count) } [V0_FILE]typescriptreact:file="SearchView.tsx" "use client" import { useState, useEffect } from "react" import { Input } from "@/components/ui/input" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card" import { searchUsers, getRandomUsers } from "./userData" import type { User } from "./types" export function SearchView() { const [searchQuery, setSearchQuery] = useState("") const [searchResults, setSearchResults] = useState([]) const [suggestedUsers, setSuggestedUsers] = useState([]) useEffect(() => { // Get 4 random users for suggestions when the component mounts setSuggestedUsers(getRandomUsers(4)) }, []) const handleSearch = (query: string) => { setSearchQuery(query) setSearchResults(searchUsers(query)) } const UserCard = ({ user }: { user: User }) => (

{user.name[0]}

{user.name}

{user.handle}

) return (

handleSearch(e.target.value)} /> {searchResults.length > 0 && (

Search Results

{searchResults.map((user) => ( ))}

)} Available Commissions {suggestedUsers.map((user) => ( ))}

) } [V0_FILE]typescriptreact:file="MessagesView.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { ChevronLeft } from "lucide-react" import { users } from "./userData" type Message = { id: number senderId: number receiverId: number content: string timestamp: string } const initialMessages: Message[] = [ { id: 1, senderId: 2, receiverId: 5, content: "Traveler, we need your help with an urgent matter in Mondstadt.", timestamp: "10:30 AM", }, { id: 2, senderId: 5, receiverId: 2, content: "Of course, Acting Grand Master. What's the situation?", timestamp: "10:35 AM", }, { id: 3, senderId: 1, receiverId: 5, content: "Hey Traveler! Don't forget about our expedition to gather ingredients later!", timestamp: "11:15 AM", }, { id: 4, senderId: 3, receiverId: 5, content: "Care for a drink at the tavern? I've got a new song to share!", timestamp: "Yesterday", }, { id: 5, senderId: 4, receiverId: 5, content: "I found an intriguing book you might like. Stop by the library when you can.", timestamp: "2d ago", }, ] export function MessagesView() { const [activeChat, setActiveChat] = useState(null) const [messages, setMessages] = useState(initialMessages) const [newMessage, setNewMessage] = useState("") const filteredUsers = users.filter((user) => user.id !== 5) // Exclude the Traveler const getLastMessage = (userId: number) => { return messages .filter( (msg) => (msg.senderId === userId && msg.receiverId === 5) || (msg.senderId === 5 && msg.receiverId === userId), ) .sort((a, b) => b.id - a.id)[0] } const chatMessages = messages.filter( (msg) => (msg.senderId === activeChat && msg.receiverId === 5) || (msg.senderId === 5 && msg.receiverId === activeChat), ) const handleSendMessage = () => { if (newMessage.trim() && activeChat) { const newMsg: Message = { id: messages.length + 1, senderId: 5, // Traveler's ID receiverId: activeChat, content: newMessage, timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), } setMessages([...messages, newMsg]) setNewMessage("") } } if (activeChat) { const chatUser = users.find((u) => u.id === activeChat)! return (

{chatUser.name[0]}

{chatUser.name}

{chatUser.handle}

{chatMessages.map((msg) => (

{msg.content}

{msg.timestamp}

))}

setNewMessage(e.target.value)} placeholder="Type your message..." onKeyPress={(e) => e.key === "Enter" && handleSendMessage()} />

) } return (

Adventurer's Guild Dispatch

{filteredUsers.map((user) => { const lastMessage = getLastMessage(user.id) return (

setActiveChat(user.id)} > {user.name[0]}

{" "} {/* Added px-2 for horizontal padding */}

{user.name}

{lastMessage && ( {lastMessage.timestamp} )}

{user.handle}

{lastMessage &&

{lastMessage.content}

}

) })}

) } [V0_FILE]typescriptreact:file="NotificationsView.tsx" import { ScrollArea } from "@/components/ui/scroll-area" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Bell, Heart, MessageCircle, Repeat2 } from "lucide-react" type Notification = { id: number type: "like" | "comment" | "repost" | "mention" user: { name: string avatar: string } content: string time: string } const notifications: Notification[] = [ { id: 1, type: "like", user: { name: "Jean", avatar: "/jean.png" }, content: "liked your post about Mondstadt", time: "2h ago", }, { id: 2, type: "comment", user: { name: "Paimon", avatar: "/paimon.png" }, content: "commented on your adventure log", time: "4h ago", }, { id: 3, type: "repost", user: { name: "Venti", avatar: "/venti.png" }, content: "shared your story about Dvalin", time: "1d ago", }, { id: 4, type: "mention", user: { name: "Lisa", avatar: "/lisa.png" }, content: "mentioned you in a post about the library", time: "2d ago", }, { id: 5, type: "like", user: { name: "Amber", avatar: "/amber.png" }, content: "liked your gliding championship post", time: "3d ago", }, ] export function NotificationsView() { const getNotificationIcon = (type: Notification["type"]) => { switch (type) { case "like": return case "comment": return case "repost": return case "mention": return } } return (

Adventure Log Updates

{notifications.map((notification) => (

{notification.user.name[0]}

{getNotificationIcon(notification.type)}

{notification.user.name} {notification.content}

{notification.time}

))}

) } [V0_FILE]typescriptreact:file="genshin-social.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { Home, Search, Bell, Mail, Feather, Palette } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { PostInteractions } from "./PostInteractions" import { CommentSection } from "./CommentSection" import { SearchView } from "./SearchView" import { MessagesView } from "./MessagesView" import { NotificationsView } from "./NotificationsView" import type { Post, Comment, User } from "./types" import { users } from "./userData" const themes = [ "Mondstadt", "Dragonspine", "Liyue", "Inazuma", "Sumeru", "Fontaine", "Natlan", "Snezhnaya", "Khaenri'ah", "Enkanomiya", ] export default function GenshinSocial() { const [currentTheme, setCurrentTheme] = useState("Mondstadt") const [activeTab, setActiveTab] = useState("home") const [posts, setPosts] = useState([ { id: 1, userId: 1, content: "Hey travelers! Who's excited for the upcoming Lantern Rite festival? 🏮✨", time: "2h", likes: 42, comments: 18, reposts: 7, isLiked: false, isReposted: false, }, { id: 2, userId: 2, content: "Just finished my daily commissions. Time for some relaxing tea at the Cat's Tail! ☕🐱", time: "5h", likes: 28, comments: 7, reposts: 3, isLiked: false, isReposted: false, }, { id: 3, userId: 3, content: "🎵 The wind whispers tales of adventure, who shall heed its call? 🍃🎶", time: "1d", likes: 56, comments: 23, reposts: 15, isLiked: false, isReposted: false, }, ]) const [comments, setComments] = useState([ { id: 1, postId: 1, userId: 5, content: "Can't wait for the festival!", time: "1h" }, { id: 2, postId: 2, userId: 4, content: "Enjoy your tea, Jean!", time: "4h" }, ]) const [activeCommentSection, setActiveCommentSection] = useState(null) const handleLike = (postId: number) => { setPosts( posts.map((post) => post.id === postId ? { ...post, likes: post.isLiked ? post.likes - 1 : post.likes + 1, isLiked: !post.isLiked } : post, ), ) } const handleRepost = (postId: number) => { setPosts( posts.map((post) => post.id === postId ? { ...post, reposts: post.isReposted ? post.reposts - 1 : post.reposts + 1, isReposted: !post.isReposted } : post, ), ) } const handleComment = (postId: number) => { setActiveCommentSection(activeCommentSection === postId ? null : postId) } const handleAddComment = (postId: number, content: string) => { const newComment: Comment = { id: comments.length + 1, postId, userId: 5, // Assuming the current user is the Traveler content, time: "Just now", } setComments([...comments, newComment]) setPosts(posts.map((post) => (post.id === postId ? { ...post, comments: post.comments + 1 } : post))) } const getUserById = (id: number): User => { return users.find((user) => user.id === id) || users[0] } const renderMainContent = () => { switch (activeTab) { case "search": return case "messages": return case "notifications": return case "home": default: return (

{/* What's on your mind? */}

{/* Posts */} {posts.map((post) => { const user = getUserById(post.userId) return ( {user.name[0]}

{user.name}

{user.handle}

{post.time}

{post.content}

{activeCommentSection === post.id && ( c.postId === post.id) .map((c) => ({ ...c, name: getUserById(c.userId).name, handle: getUserById(c.userId).handle, avatar: getUserById(c.userId).avatar, }))} onAddComment={handleAddComment} currentUserAvatar="/traveler.png" /> )} ) })}

) } } return (

{/* Top Navigation */}

Teyvat

{themes.map((theme) => ( setCurrentTheme(theme)}> {theme} ))}

{/* Main Content */} {renderMainContent()} {/* Bottom Navigation */}

{/* Floating Action Button for New Post */}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This