[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 } export type Guild = { id: number name: string description: string avatar: string banner: string ownerId: number memberIds: number[] createdAt: string } export type GuildMessage = { id: number guildId: number userId: number content: string timestamp: 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" isQuickEdit="true" "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" "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 { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ChevronLeft, Plus, Search, Send } 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 [activeTab, setActiveTab] = useState("all") const [searchQuery, setSearchQuery] = 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("") } } // Filter users based on search query and active tab const filteredContactsBySearch = filteredUsers.filter( (user) => user.name.toLowerCase().includes(searchQuery.toLowerCase()) || user.handle.toLowerCase().includes(searchQuery.toLowerCase()), ) // Get users with recent messages for the "Recent" tab const usersWithRecentMessages = filteredUsers.filter((user) => messages.some((msg) => msg.senderId === user.id || msg.receiverId === user.id), ) 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()} className="flex-grow bg-background/50" />

) } return (

Adventurer's Guild Dispatch

setSearchQuery(e.target.value)} />

All Recent Unread

{(activeTab === "all" ? filteredContactsBySearch : activeTab === "recent" ? usersWithRecentMessages : []).map( (user) => { const lastMessage = getLastMessage(user.id) return (

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

{user.name}

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

{user.handle}

{lastMessage &&

{lastMessage.content}

}

) }, )} {filteredContactsBySearch.length === 0 && (

No contacts found

Try a different search term

)}

) } [V0_FILE]typescriptreact:file="NotificationsView.tsx" isQuickEdit="true" 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="RegionSelector.tsx" "use client" import { useState, useEffect } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Check } from "lucide-react" import { motion } from "framer-motion" export type Region = { id: string name: string description: string colors: { primary: string secondary: string accent: string background: string } } const regions: Region[] = [ { id: "mondstadt", name: "Mondstadt", description: "Land of Freedom", colors: { primary: "#4a8af4", secondary: "#c9e0ff", accent: "#d6e7ff", background: "linear-gradient(135deg, #e0f2ff 0%, #c9e0ff 100%)", }, }, { id: "dragonspine", name: "Dragonspine", description: "Frosty Peak", colors: { primary: "#a0c4de", secondary: "#e0f0ff", accent: "#d1e5f5", background: "linear-gradient(135deg, #e8f4ff 0%, #d1e5f5 100%)", }, }, { id: "liyue", name: "Liyue", description: "Land of Contracts", colors: { primary: "#f5b642", secondary: "#ffebc2", accent: "#ffe0a3", background: "linear-gradient(135deg, #fff8e8 0%, #ffebc2 100%)", }, }, { id: "inazuma", name: "Inazuma", description: "Land of Eternity", colors: { primary: "#a256e7", secondary: "#e9d5ff", accent: "#dfc5f7", background: "linear-gradient(135deg, #f5edff 0%, #e9d5ff 100%)", }, }, { id: "sumeru", name: "Sumeru", description: "Land of Wisdom", colors: { primary: "#4caf50", secondary: "#d8f3d8", accent: "#c5e8c5", background: "linear-gradient(135deg, #efffef 0%, #d8f3d8 100%)", }, }, { id: "fontaine", name: "Fontaine", description: "Land of Justice", colors: { primary: "#00b8d4", secondary: "#c2f0f9", accent: "#a3e8f7", background: "linear-gradient(135deg, #e3faff 0%, #c2f0f9 100%)", }, }, { id: "natlan", name: "Natlan", description: "Land of War", colors: { primary: "#ff5722", secondary: "#ffd3c2", accent: "#ffbca3", background: "linear-gradient(135deg, #fff0eb 0%, #ffd3c2 100%)", }, }, { id: "snezhnaya", name: "Snezhnaya", description: "Land of Winter", colors: { primary: "#90caf9", secondary: "#e3f2fd", accent: "#bbdefb", background: "linear-gradient(135deg, #f5faff 0%, #e3f2fd 100%)", }, }, { id: "khaenriah", name: "Khaenri'ah", description: "Fallen Kingdom", colors: { primary: "#3949ab", secondary: "#c5cae9", accent: "#9fa8da", background: "linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%)", }, }, { id: "enkanomiya", name: "Enkanomiya", description: "Sunken Ruins", colors: { primary: "#00acc1", secondary: "#b2ebf2", accent: "#80deea", background: "linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%)", }, }, ] interface RegionSelectorProps { open: boolean onOpenChange: (open: boolean) => void selectedRegion: string onRegionChange: (region: Region) => void } export function RegionSelector({ open, onOpenChange, selectedRegion, onRegionChange }: RegionSelectorProps) { const [hoveredRegion, setHoveredRegion] = useState(null) const [localSelectedRegion, setLocalSelectedRegion] = useState(selectedRegion) useEffect(() => { setLocalSelectedRegion(selectedRegion) }, [selectedRegion]) const handleRegionSelect = (region: Region) => { setLocalSelectedRegion(region.id) onRegionChange(region) } return ( ) } [V0_FILE]typescriptreact:file="package.json" { "dependencies": { "framer-motion": "^10.16.4", "react-circular-progressbar": "^2.1.0" } } [V0_FILE]typescriptreact:file="OnlineTimer.tsx" "use client" import { useState, useEffect } from "react" import { CircularProgressbar, buildStyles } from "react-circular-progressbar" import "react-circular-progressbar/dist/styles.css" export function OnlineTimer() { const [onlineTime, setOnlineTime] = useState(0) // in minutes const [displayTime, setDisplayTime] = useState("") // Max time to show in the circle (2 hours) const maxTime = 120 const percentage = Math.min((onlineTime / maxTime) * 100, 100) useEffect(() => { // Start the timer when component mounts const interval = setInterval(() => { setOnlineTime((prev) => prev + 1) }, 60000) // Update every minute return () => clearInterval(interval) }, []) useEffect(() => { // Format the time display const hours = Math.floor(onlineTime / 60) const minutes = onlineTime % 60 if (hours > 0) { setDisplayTime(`${hours}h ${minutes}m`) } else { setDisplayTime(`${minutes}m`) } }, [onlineTime]) return (

Resin Counter

{displayTime}

) } [V0_FILE]typescriptreact:file="guildData.ts" import type { Guild, GuildMessage } from "./types" import { users } from "./userData" export const guilds: Guild[] = [ { id: 1, name: "Knights of Favonius", description: "Official guild of the Knights of Favonius. Protecting Mondstadt with honor and duty.", avatar: "/placeholder.svg?height=80&width=80", banner: "/placeholder.svg?height=200&width=600", ownerId: 2, // Jean memberIds: [2, 4, 6, 7], // Jean, Lisa, Amber, Kaeya createdAt: "2 years ago", }, { id: 2, name: "Wangsheng Funeral Parlor", description: "Liyue's premier funeral service. We'll help you cross to the other side in style.", avatar: "/placeholder.svg?height=80&width=80", banner: "/placeholder.svg?height=200&width=600", ownerId: 8, // Using Diluc as a placeholder memberIds: [8, 3, 9], // Diluc, Venti, Razor as placeholders createdAt: "1 year ago", }, { id: 3, name: "Adventurers' Guild", description: "Explorers and treasure hunters welcome! Share your discoveries and join expeditions.", avatar: "/placeholder.svg?height=80&width=80", banner: "/placeholder.svg?height=200&width=600", ownerId: 5, // Traveler memberIds: [5, 1, 10], // Traveler, Paimon, Barbara createdAt: "6 months ago", }, ] export const guildMessages: GuildMessage[] = [ { id: 1, guildId: 1, userId: 2, content: "Knights, please submit your patrol reports by the end of the week.", timestamp: "2h ago", }, { id: 2, guildId: 1, userId: 6, content: "Spotted some unusual hilichurl activity near Windrise. Anyone available to investigate?", timestamp: "1h ago", }, { id: 3, guildId: 1, userId: 4, content: "I'll be in the library if anyone needs research assistance.", timestamp: "45m ago", }, { id: 4, guildId: 2, userId: 8, content: "New client meeting tomorrow at Dawn Winery. Please prepare accordingly.", timestamp: "3h ago", }, { id: 5, guildId: 3, userId: 1, content: "Paimon found a new treasure spot! Who wants to join us?", timestamp: "30m ago", }, { id: 6, guildId: 3, userId: 5, content: "Just completed a commission near Dragonspine. The rewards were great!", timestamp: "15m ago", }, ] export function getGuildById(id: number): Guild | undefined { return guilds.find((guild) => guild.id === id) } export function getGuildsByMemberId(userId: number): Guild[] { return guilds.filter((guild) => guild.memberIds.includes(userId)) } export function getGuildMessages(guildId: number): GuildMessage[] { return guildMessages .filter((message) => message.guildId === guildId) .sort((a, b) => { // Sort by timestamp (newest last) return a.id - b.id }) } export function getGuildMembers(guild: Guild) { return users.filter((user) => guild.memberIds.includes(user.id)) } export function isGuildOwner(guild: Guild, userId: number): boolean { return guild.ownerId === userId } export function isGuildMember(guild: Guild, userId: number): boolean { return guild.memberIds.includes(userId) } [V0_FILE]typescriptreact:file="GuildsView.tsx" "use client" import { useState } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ChevronLeft, Plus, Send, Settings, Users } from "lucide-react" import { guilds, guildMessages, getGuildMembers, getGuildMessages } from "./guildData" import { users } from "./userData" import type { Guild, GuildMessage } from "./types" export function GuildsView() { const [activeGuild, setActiveGuild] = useState(null) const [newMessage, setNewMessage] = useState("") const [messages, setMessages] = useState(guildMessages) const [isCreateGuildOpen, setIsCreateGuildOpen] = useState(false) const [newGuildData, setNewGuildData] = useState({ name: "", description: "", avatar: "/placeholder.svg?height=80&width=80", }) const [isInviteOpen, setIsInviteOpen] = useState(false) const [searchQuery, setSearchQuery] = useState("") const [activeTab, setActiveTab] = useState("chat") // Current user is assumed to be the Traveler (id: 5) const currentUserId = 5 const userGuilds = guilds.filter((guild) => guild.memberIds.includes(currentUserId)) const filteredUsers = users.filter((user) => { if (!activeGuild) return false if (activeGuild.memberIds.includes(user.id)) return false if (searchQuery === "") return true return ( user.name.toLowerCase().includes(searchQuery.toLowerCase()) || user.handle.toLowerCase().includes(searchQuery.toLowerCase()) ) }) const handleSendMessage = () => { if (newMessage.trim() && activeGuild) { const newMsg: GuildMessage = { id: messages.length + 1, guildId: activeGuild.id, userId: currentUserId, content: newMessage, timestamp: "Just now", } setMessages([...messages, newMsg]) setNewMessage("") } } const handleCreateGuild = () => { // In a real app, this would make an API call // For now, we'll just close the dialog setIsCreateGuildOpen(false) setNewGuildData({ name: "", description: "", avatar: "/placeholder.svg?height=80&width=80", }) } const handleInviteUser = (userId: number) => { // In a real app, this would send an invitation // For now, we'll just close the dialog setIsInviteOpen(false) setSearchQuery("") } if (activeGuild) { const guildMembers = getGuildMembers(activeGuild) const guildChatMessages = messages.filter((msg) => msg.guildId === activeGuild.id) return (

{activeGuild.name[0]}

{activeGuild.name}

{guildMembers.length} members

Chat Members {guildChatMessages.map((msg) => { const sender = users.find((user) => user.id === msg.userId) if (!sender) return null return (

{msg.userId !== currentUserId && ( {sender.name[0]} )}

{msg.userId !== currentUserId && (

{sender.name}

)}

{msg.content}

{msg.timestamp}

) })}

setNewMessage(e.target.value)} placeholder="Type your message..." onKeyPress={(e) => e.key === "Enter" && handleSendMessage()} className="flex-grow bg-background/50" />

Guild Owner

{guildMembers .filter((member) => member.id === activeGuild.ownerId) .map((member) => (

{member.name[0]}

{member.name}

{member.handle}

Owner

))}

Members

{guildMembers .filter((member) => member.id !== activeGuild.ownerId) .map((member) => (

{member.name[0]}

{member.name}

{member.handle}

))}

{/* Invite Members Dialog */}

) } return (

Teyvat Guilds

{userGuilds.length === 0 ? (

You haven't joined any guilds yet.

) : (

{userGuilds.map((guild) => { const members = getGuildMembers(guild) const latestMessage = getGuildMessages(guild.id).pop() const messageSender = latestMessage ? users.find((user) => user.id === latestMessage.userId) : null return ( setActiveGuild(guild)} >

{guild.name[0]}

{guild.name}

{members.length} members • Created {guild.createdAt}

{guild.description}

{latestMessage && messageSender && (

Latest message:

{messageSender.name[0]}

{latestMessage.content}

{latestMessage.timestamp}

)} ) })}

)} {/* Create Guild Dialog */}

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This