[V0_FILE]typescriptreact:file="app/home.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Users, BookOpen, Award, ChevronRight, BarChart } from "lucide-react" import { Card } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Badge } from "@/components/ui/badge" import { QuranReadingTimer } from "./components/quran-reading-timer" import { InviteMember } from "./components/invite-member" import { GroupInvitations } from "./components/group-invitations" // Sample data for group members const initialGroupMembers = [ { id: 1, name: "Ahmed", avatar: "/placeholder.svg?height=40&width=40", progress: 75, time: 120, streak: 7 }, { id: 2, name: "Fatima", avatar: "/placeholder.svg?height=40&width=40", progress: 60, time: 95, streak: 5 }, { id: 3, name: "Omar", avatar: "/placeholder.svg?height=40&width=40", progress: 45, time: 72, streak: 3 }, { id: 4, name: "Aisha", avatar: "/placeholder.svg?height=40&width=40", progress: 90, time: 145, streak: 10 }, { id: 5, name: "Yusuf", avatar: "/placeholder.svg?height=40&width=40", progress: 30, time: 48, streak: 2 }, ] export function Home() { const [readingTime, setReadingTime] = useState(0) const [isTracking, setIsTracking] = useState(false) const [activeTab, setActiveTab] = useState("group") const [groupMembers, setGroupMembers] = useState(initialGroupMembers) const [invitations, setInvitations] = useState>([]) // Calculate total group progress const totalTime = groupMembers.reduce((sum, member) => sum + member.time, 0) + readingTime const averageProgress = groupMembers.reduce((sum, member) => sum + member.progress, 0) / groupMembers.length const handleInvite = (email: string) => { // In a real app, this would send an invitation to the backend console.log(`Invitation sent to ${email}`) // Simulate receiving an invitation (for demo purposes) const newInvitation = { id: Date.now().toString(), from: "Demo Group", groupName: "Sabeel Quran Group", } setInvitations((prev) => [...prev, newInvitation]) } const handleAcceptInvitation = (id: string) => { // In a real app, this would confirm the invitation with the backend setInvitations((prev) => prev.filter((inv) => inv.id !== id)) // Add a new member to the group (simulated) const newMember = { id: Date.now(), name: "New Member", avatar: "/placeholder.svg?height=40&width=40", progress: 0, time: 0, streak: 0, } setGroupMembers((prev) => [...prev, newMember]) } const handleDeclineInvitation = (id: string) => { // In a real app, this would decline the invitation with the backend setInvitations((prev) => prev.filter((inv) => inv.id !== id)) } return (

سبیل (Sabeel) – "Pathway"

Group Progress

Ramadan Day 15

{Math.round(averageProgress)}%

Group Average

0% 100%

Group Personal

Group Members

{groupMembers.length} members

{groupMembers.map((member) => (

{member.name[0]}

{member.name}

{member.streak} day streak

{member.progress}% completed {Math.floor(member.time / 60)}h {member.time % 60}m

))}

Total Reading

Group effort

{Math.floor(totalTime / 60)}h {totalTime % 60}m

Your Statistics

Daily Average

45m

Streak

7 days

Total Pages

Rank

Achievement Unlocked!

7-day streak! Keep going!

) } [V0_FILE]typescriptreact:file="app/namaz.tsx" isMerged="true" "use client" import { useState } from "react" import { Check, Clock } from "lucide-react" import { Card } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" // Sample prayer data const prayers = [ { id: 1, name: "Fajr", time: "04:35 AM", arabicName: "الفجر" }, { id: 2, name: "Dhuhr", time: "12:15 PM", arabicName: "الظهر" }, { id: 3, name: "Asr", time: "03:45 PM", arabicName: "العصر" }, { id: 4, name: "Maghrib", time: "06:32 PM", arabicName: "المغرب" }, { id: 5, name: "Isha", time: "08:00 PM", arabicName: "العشاء" }, { id: 6, name: "Taraweeh", time: "09:15 PM", arabicName: "التراويح" }, ] export function Namaz() { const [completedPrayers, setCompletedPrayers] = useState([1, 2]) // Sample completed prayers const togglePrayer = (id: number) => { if (completedPrayers.includes(id)) { setCompletedPrayers(completedPrayers.filter((prayerId) => prayerId !== id)) } else { setCompletedPrayers([...completedPrayers, id]) } } const completionPercentage = (completedPrayers.length / prayers.length) * 100 return (

Namaz

Ramadan Day 15

Daily Progress

Prayer completion

{Math.round(completionPercentage)}%

{completedPrayers.length}/{prayers.length} completed

Today's Prayers

{prayers.map((prayer) => { const isCompleted = completedPrayers.includes(prayer.id) return (

{prayer.name}

{prayer.arabicName}

{prayer.time}

{isCompleted && ( Completed )}

) })}

Weekly Stats

Last 7 days

85%

Average completion

{["M", "T", "W", "T", "F", "S", "S"].map((day, index) => (

{day}

))}

) } [V0_FILE]typescriptreact:file="app/timings.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Clock, Sun, Moon, MapPin, Calendar } from "lucide-react" import { Card } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // Sample prayer times data const prayerTimes = [ { id: 1, name: "Fajr", time: "04:35 AM", arabicName: "الفجر" }, { id: 2, name: "Sunrise", time: "06:05 AM", arabicName: "الشروق" }, { id: 3, name: "Dhuhr", time: "12:15 PM", arabicName: "الظهر" }, { id: 4, name: "Asr", time: "03:45 PM", arabicName: "العصر" }, { id: 5, name: "Maghrib", time: "06:32 PM", arabicName: "المغرب" }, { id: 6, name: "Isha", time: "08:00 PM", arabicName: "العشاء" }, ] export function Timings() { const [currentTime, setCurrentTime] = useState(new Date()) const [isDaytime, setIsDaytime] = useState(true) // Update current time every minute useEffect(() => { const timer = setInterval(() => { const now = new Date() setCurrentTime(now) // Check if it's daytime (between 6 AM and 6 PM for simplicity) const hours = now.getHours() setIsDaytime(hours >= 6 && hours < 18) }, 60000) return () => clearInterval(timer) }, []) // Format current time const formattedTime = currentTime.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: true, }) // Calculate time until next prayer const nextPrayer = prayerTimes[2] // For demo purposes, using Dhuhr // Calculate day progress (for demo purposes) const dayProgress = ((currentTime.getHours() * 60 + currentTime.getMinutes()) / (24 * 60)) * 100 return (

Timings

Karachi

Current Time

{formattedTime}

{isDaytime ? : }

Sunrise Sunset

Sehri Ends

04:35 AM

1h 23m remaining

Iftar Time

06:32 PM

8h 15m remaining

Today Week

15 Ramadan, 1445

Today

{prayerTimes.map((prayer) => { const isPast = Math.random() > 0.5 // For demo purposes const isNext = prayer.id === 3 // For demo purposes return (

{prayer.name}

{prayer.arabicName}

{prayer.time}

{isNext &&

Next prayer

} {isPast && ( Passed )}

) })}

{[...Array(7)].map((_, index) => { const date = new Date() date.setDate(date.getDate() + index) const dayName = date.toLocaleDateString("en-US", { weekday: "short" }) const dayNum = date.getDate() const isToday = index === 0 return (

{dayNum}

{dayName}

{isToday ? "Today" : `${15 + index} Ramadan`}

04:{35 + index} AM

Sehri

06:{32 + index} PM

Iftar

) })}

) } [V0_FILE]typescriptreact:file="app/settings.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Bell, Moon, Users, Globe, ChevronRight, Languages, Volume2, HelpCircle, LogOut, Github } from "lucide-react" import { Card } from "@/components/ui/card" import { Switch } from "@/components/ui/switch" import { Separator } from "@/components/ui/separator" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import Link from "next/link" import { ThemeToggle } from "./components/theme-toggle" export function Settings() { const [notifications, setNotifications] = useState(true) const [prayerAlerts, setPrayerAlerts] = useState(true) const [groupUpdates, setGroupUpdates] = useState(true) return (

Settings

Ahmed Khan

ahmed@example.com

Preferences

Dark Mode

Toggle dark theme

Notifications

Enable push notifications

Prayer Alerts

Receive prayer time alerts

Group Updates

Get group activity notifications

General

Location

Karachi

Language

English

Help & Support

Created by

Syed Bilal Alam

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import { ThemeProvider } from "./components/theme-provider" export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/sign-in.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Eye, EyeOff, Mail, Lock, ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { useRouter } from "next/navigation" import Link from "next/link" export default function SignIn() { const [showPassword, setShowPassword] = useState(false) const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSignIn = (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate authentication setTimeout(() => { setIsLoading(false) router.push("/") }, 1500) } return (

سبیل

Sabeel

Your Ramadan companion

Sign In

setEmail(e.target.value)} required />

Password Forgot password?

setPassword(e.target.value)} required />

Or continue with

Don't have an account?{" "} Create an account

) } [V0_FILE]typescriptreact:file="app/sign-up.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Eye, EyeOff, Mail, Lock, User, ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { Checkbox } from "@/components/ui/checkbox" import { useRouter } from "next/navigation" import Link from "next/link" export default function SignUp() { const [showPassword, setShowPassword] = useState(false) const [name, setName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSignUp = (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate account creation setTimeout(() => { setIsLoading(false) router.push("/") }, 1500) } return (

سبیل

Sabeel

Your Ramadan companion

Create an Account

Full Name

setName(e.target.value)} required />

setEmail(e.target.value)} required />

Password

setPassword(e.target.value)} required />

I agree to the{" "} Terms of Service {" "} and{" "} Privacy Policy

Or continue with

Already have an account?{" "} Sign in

) } [V0_FILE]typescriptreact:file="app/components/edit-profile-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { User, Mail, Phone, MapPin, Camera } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Textarea } from "@/components/ui/textarea" interface EditProfileFormProps { user: { name: string email: string phone: string location: string bio: string avatar: string } onSave: (updatedUser: any) => void onCancel: () => void } export function EditProfileForm({ user, onSave, onCancel }: EditProfileFormProps) { const [formData, setFormData] = useState(user) const [avatarFile, setAvatarFile] = useState(null) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleAvatarChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files[0]) { setAvatarFile(e.target.files[0]) } } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // In a real app, you'd upload the avatar file to a server here // and get back a URL to save with the user data onSave({ ...formData, avatar: avatarFile ? URL.createObjectURL(avatarFile) : user.avatar }) } return (

{user.name.charAt(0)}

Change Avatar

Full Name

Phone

Location

Bio

</div>
      </div>

<div className="flex justify-end space-x-4">
        <Button type="button" variant="outline" onClick={onCancel}>
          Cancel
        </Button>
        <Button type="submit">Save Changes</Button>
      </div>
    </form>
  )
}

[V0_FILE]typescriptreact:file="app/components/quran-reading-timer.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Play, Pause, StopCircle, BookOpen } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"

export function QuranReadingTimer() {
  const [isReading, setIsReading] = useState(false)
  const [time, setTime] = useState(0)
  const [todayTotal, setTodayTotal] = useState(0)

useEffect(() => {
    let interval: NodeJS.Timeout | null = null
    if (isReading) {
      interval = setInterval(() => {
        setTime((prevTime) => prevTime + 1)
      }, 1000)
    } else if (!isReading && time !== 0) {
      if (interval) clearInterval(interval)
    }
    return () => {
      if (interval) clearInterval(interval)
    }
  }, [isReading, time])

const formatTime = (seconds: number) => {
    const hours = Math.floor(seconds / 3600)
    const minutes = Math.floor((seconds % 3600) / 60)
    const remainingSeconds = seconds % 60
    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`
  }

const handleStartStop = () => {
    setIsReading(!isReading)
  }

const handleReset = () => {
    if (isReading) setIsReading(false)
    setTodayTotal((prevTotal) => prevTotal + time)
    setTime(0)
    // Here you would also save the session to Firebase
    console.log("Session ended. Total time:", formatTime(time))
  }

return (
    <Card className="p-6 bg-gradient-to-br from-primary/10 to-secondary/10 border-none shadow-lg">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h3 className="text-lg font-semibold flex items-center">
            <BookOpen className="w-5 h-5 mr-2 text-primary" />
            Quran Reading
          </h3>
          <p className="text-sm text-muted-foreground">Track your reading time</p>
        </div>
        <div className="text-right">
          <p className="text-3xl font-bold text-primary">{formatTime(time)}</p>
          <p className="text-sm text-muted-foreground">Current session</p>
        </div>
      </div>

<div className="space-y-4">
        <div className="flex justify-center space-x-4">
          <Button variant={isReading ? "destructive" : "default"} size="lg" className="w-32" onClick={handleStartStop}>
            {isReading ? (
              <>
                <Pause className="w-4 h-4 mr-2" />
                Pause
              </>
            ) : (
              <>
                <Play className="w-4 h-4 mr-2" />
                Start
              </>
            )}
          </Button>
          <Button variant="outline" size="lg" className="w-32" onClick={handleReset} disabled={time === 0}>
            <StopCircle className="w-4 h-4 mr-2" />
            End Session
          </Button>
        </div>

<div className="mt-6">
          <div className="flex justify-between text-sm text-muted-foreground mb-2">
            <span>Today's Total</span>
            <span>{formatTime(todayTotal + time)}</span>
          </div>
          <Progress value={((todayTotal + time) / (8 * 3600)) * 100} className="h-2" />
          <p className="text-xs text-muted-foreground mt-1 text-right">Goal: 8 hours</p>
        </div>
      </div>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/components/theme-toggle.tsx" isMerged="true"
"use client"

import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export function ThemeToggle() {
  const { setTheme } = useTheme()

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

[V0_FILE]typescriptreact:file="app/components/theme-provider.tsx" isEdit="true" isMerged="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return (
    <NextThemesProvider attribute="class" defaultTheme="light" enableSystem={false} {...props}>
      {children}
    </NextThemesProvider>
  )
}

[V0_FILE]typescriptreact:file="app/components/invite-member.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { UserPlus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"

interface InviteMemberProps {
  onInvite: (email: string) => void
}

export function InviteMember({ onInvite }: InviteMemberProps) {
  const [email, setEmail] = useState("")
  const [isOpen, setIsOpen] = useState(false)

const handleInvite = () => {
    if (email) {
      onInvite(email)
      setEmail("")
      setIsOpen(false)
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button variant="outline">
          <UserPlus className="mr-2 h-4 w-4" />
          Invite Member
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Invite a new member</DialogTitle>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="email" className="text-right">
              Email
            </Label>
            <Input
              id="email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="col-span-3"
              placeholder="member@example.com"
            />
          </div>
        </div>
        <Button onClick={handleInvite} disabled={!email}>
          Send Invitation
        </Button>
      </DialogContent>
    </Dialog>
  )
}

[V0_FILE]typescriptreact:file="app/components/group-invitations.tsx" isMerged="true"
"use client"

import { Bell } from "lucide-react"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"

interface Invitation {
  id: string
  from: string
  groupName: string
}

interface GroupInvitationsProps {
  invitations: Invitation[]
  onAccept: (id: string) => void
  onDecline: (id: string) => void
}

export function GroupInvitations({ invitations, onAccept, onDecline }: GroupInvitationsProps) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Bell className="h-[1.2rem] w-[1.2rem]" />
          {invitations.length > 0 && (
            <Badge
              variant="destructive"
              className="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 text-xs flex items-center justify-center"
            >
              {invitations.length}
            </Badge>
          )}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-[300px]">
        {invitations.length === 0 ? (
          <DropdownMenuItem>No pending invitations</DropdownMenuItem>
        ) : (
          invitations.map((invitation) => (
            <DropdownMenuItem key={invitation.id} className="flex flex-col items-start">
              <p className="font-medium">
                {invitation.from} invited you to join {invitation.groupName}
              </p>
              <div className="flex gap-2 mt-2">
                <Button size="sm" onClick={() => onAccept(invitation.id)}>
                  Accept
                </Button>
                <Button size="sm" variant="outline" onClick={() => onDecline(invitation.id)}>
                  Decline
                </Button>
              </div>
            </DropdownMenuItem>
          ))
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

[V0_FILE]javascript:file="tailwind.config.js" isEdit="true" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  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")],
}

[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 40 50% 98%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 210 100% 50%;
    --primary-foreground: 210 40% 98%;

--secondary: 30 100% 60%;
    --secondary-foreground: 30 10% 10%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 150 80% 45%;
    --accent-foreground: 150 10% 10%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

--radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 210 100% 60%;
    --primary-foreground: 210 10% 10%;

--secondary: 30 100% 70%;
    --secondary-foreground: 30 10% 10%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 150 80% 55%;
    --accent-foreground: 150 10% 10%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="app/profile.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import {
  User,
  Edit,
  Award,
  TrendingUp,
  BookOpen,
  Calendar,
  ChevronLeft,
  MapPin,
  Mail,
  Phone,
  CameraIcon,
} from "lucide-react"
import { Card } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import Link from "next/link"
import { EditProfileForm } from "./components/edit-profile-form"

// Sample achievements data
const achievements = [
  {
    id: 1,
    name: "Early Bird",
    description: "Completed Fajr prayer for 7 consecutive days",
    icon: "🌅",
    date: "March 15, 2024",
    progress: 100,
  },
  {
    id: 2,
    name: "Quran Enthusiast",
    description: "Read Quran for 10+ hours",
    icon: "📖",
    date: "March 18, 2024",
    progress: 100,
  },
  {
    id: 3,
    name: "Group Leader",
    description: "Top contributor in your group",
    icon: "🏆",
    date: "March 20, 2024",
    progress: 100,
  },
  {
    id: 4,
    name: "Consistency King",
    description: "Maintained daily reading streak for 15 days",
    icon: "🔥",
    date: "In Progress",
    progress: 80,
  },
  {
    id: 5,
    name: "Night Devotee",
    description: "Completed Taraweeh prayers for 10 nights",
    icon: "🌙",
    date: "In Progress",
    progress: 60,
  },
]

// Sample goals data
const goals = [
  { id: 1, name: "Complete Quran reading", progress: 45, target: "30 days" },
  { id: 2, name: "Pray all 5 daily prayers", progress: 85, target: "Every day" },
  { id: 3, name: "Memorize 5 new surahs", progress: 30, target: "Ramadan" },
  { id: 4, name: "Give charity", progress: 70, target: "Weekly" },
]

// Sample activity data
const activities = [
  { id: 1, type: "prayer", description: "Completed Fajr prayer", time: "Today, 5:30 AM" },
  { id: 2, type: "quran", description: "Read Quran for 45 minutes", time: "Today, 10:15 AM" },
  { id: 3, type: "group", description: "Joined group reading session", time: "Yesterday, 8:00 PM" },
  { id: 4, type: "achievement", description: "Earned 'Early Bird' badge", time: "March 15, 2024" },
  { id: 5, type: "prayer", description: "Completed all prayers", time: "March 14, 2024" },
]

export default function Profile() {
  const [activeTab, setActiveTab] = useState("overview")
  const [isEditing, setIsEditing] = useState(false)
  const [userData, setUserData] = useState({
    name: "Ahmed Khan",
    email: "ahmed@example.com",
    phone: "+92 300 1234567",
    location: "Karachi, Pakistan",
    bio: "Passionate about self-improvement and spiritual growth. Excited to make the most of this Ramadan!",
    avatar: "/placeholder.svg?height=128&width=128",
  })
  const [coverPhoto, setCoverPhoto] = useState("/default-cover.jpg")

const handleSaveProfile = (updatedUser: any) => {
    setUserData(updatedUser)
    setIsEditing(false)
    // In a real app, you'd send this data to your backend here
  }

const handleCoverPhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const reader = new FileReader()
      reader.onload = (event) => {
        if (event.target && typeof event.target.result === "string") {
          setCoverPhoto(event.target.result)
        }
      }
      reader.readAsDataURL(e.target.files[0])
    }
  }

if (isEditing) {
    return (
      <div className="container px-4 py-6 space-y-6 pb-16">
        <div className="flex items-center">
          <Button variant="ghost" size="icon" onClick={() => setIsEditing(false)}>
            <ChevronLeft className="h-5 w-5" />
          </Button>
          <h1 className="text-2xl font-bold text-primary ml-2">Edit Profile</h1>
        </div>
        <EditProfileForm user={userData} onSave={handleSaveProfile} onCancel={() => setIsEditing(false)} />
      </div>
    )
  }

return (
    <div className="container px-4 py-6 space-y-6 pb-16">
      <div className="flex items-center">
        <Link href="/settings" className="mr-2">
          <Button variant="ghost" size="icon">
            <ChevronLeft className="h-5 w-5" />
          </Button>
        </Link>
        <h1 className="text-2xl font-bold text-primary">Profile</h1>
      </div>

<div className="relative">
        <div className="h-48 bg-cover bg-center rounded-t-lg" style={{ backgroundImage: `url(${coverPhoto})` }}>
          <label
            htmlFor="cover-photo-upload"
            className="absolute top-2 right-2 bg-primary text-primary-foreground p-2 rounded-full cursor-pointer hover:bg-primary/90 transition-colors"
          >
            <CameraIcon className="h-5 w-5" />
          </label>
          <input
            id="cover-photo-upload"
            type="file"
            accept="image/*"
            className="hidden"
            onChange={handleCoverPhotoChange}
          />
        </div>
        <div className="relative bg-gradient-to-r from-primary/20 to-secondary/20 rounded-b-lg p-6 pt-24">
          <div className="absolute -top-12 left-1/2 transform -translate-x-1/2">
            <Avatar className="h-24 w-24 border-4 border-background">
              <AvatarImage src={userData.avatar} alt={userData.name} />
              <AvatarFallback className="text-4xl">{userData.name.charAt(0)}</AvatarFallback>
            </Avatar>
          </div>
          <div className="text-center">
            <h2 className="text-2xl font-bold">{userData.name}</h2>
            <div className="flex items-center justify-center text-muted-foreground mt-1">
              <MapPin className="h-4 w-4 mr-1" />
              <span>{userData.location}</span>
            </div>
          </div>
          <div className="mt-4 flex flex-wrap justify-center gap-3">
            <div className="flex items-center text-sm">
              <Mail className="h-4 w-4 mr-1 text-muted-foreground" />
              <span>{userData.email}</span>
            </div>
            <div className="flex items-center text-sm">
              <Phone className="h-4 w-4 mr-1 text-muted-foreground" />
              <span>{userData.phone}</span>
            </div>
          </div>
          <p className="text-sm text-muted-foreground text-center mt-4">{userData.bio}</p>
          <div className="flex flex-wrap justify-center gap-2 mt-4">
            <Badge variant="secondary">Group Leader</Badge>
            <Badge variant="outline">15 Day Streak</Badge>
            <Badge variant="outline">5 Achievements</Badge>
          </div>
          <div className="mt-6 flex justify-center">
            <Button variant="outline" onClick={() => setIsEditing(true)}>
              <Edit className="h-4 w-4 mr-2" />
              Edit Profile
            </Button>
          </div>
        </div>
      </div>

<Tabs defaultValue="overview" className="w-full mt-6">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="achievements">Achievements</TabsTrigger>
          <TabsTrigger value="goals">Goals</TabsTrigger>
        </TabsList>

<TabsContent value="overview" className="space-y-4 mt-4">
          <Card className="p-4">
            <h3 className="font-medium flex items-center mb-4">
              <TrendingUp className="h-5 w-5 mr-2 text-primary" />
              Ramadan Statistics
            </h3>

<div className="grid grid-cols-2 gap-4">
              <div className="bg-secondary/20 rounded-lg p-3 text-center">
                <p className="text-sm text-secondary-foreground">Quran Reading</p>
                <p className="text-2xl font-bold text-secondary">12h 45m</p>
                <p className="text-xs text-secondary-foreground/70">Total time</p>
              </div>
              <div className="bg-primary/20 rounded-lg p-3 text-center">
                <p className="text-sm text-primary-foreground">Prayer Completion</p>
                <p className="text-2xl font-bold text-primary">85%</p>
                <p className="text-xs text-primary-foreground/70">Average</p>
              </div>
              <div className="bg-accent/20 rounded-lg p-3 text-center">
                <p className="text-sm text-accent-foreground">Current Streak</p>
                <p className="text-2xl font-bold text-accent">15 days</p>
                <p className="text-xs text-accent-foreground/70">Consecutive</p>
              </div>
              <div className="bg-secondary/20 rounded-lg p-3 text-center">
                <p className="text-sm text-secondary-foreground">Group Rank</p>
                <p className="text-2xl font-bold text-secondary">#1</p>
                <p className="text-xs text-secondary-foreground/70">Of 8 members</p>
              </div>
            </div>
          </Card>

<Card className="p-4">
            <h3 className="font-medium flex items-center mb-4">
              <Award className="h-5 w-5 mr-2 text-primary" />
              Recent Achievements
            </h3>

<div className="space-y-4">
              {achievements.slice(0, 3).map((achievement) => (
                <div key={achievement.id} className="flex items-center">
                  <div className="flex-shrink-0 h-10 w-10 bg-accent/20 rounded-full flex items-center justify-center text-xl">
                    {achievement.icon}
                  </div>
                  <div className="ml-3 flex-1">
                    <p className="font-medium">{achievement.name}</p>
                    <p className="text-sm text-muted-foreground">{achievement.description}</p>
                  </div>
                  <div className="text-right text-sm text-muted-foreground">{achievement.date}</div>
                </div>
              ))}

<Button variant="ghost" className="w-full text-primary" asChild>
                <Link href="#" onClick={() => setActiveTab("achievements")}>
                  View All Achievements
                </Link>
              </Button>
            </div>
          </Card>

<Card className="p-4">
            <h3 className="font-medium flex items-center mb-4">
              <Calendar className="h-5 w-5 mr-2 text-primary" />
              Recent Activity
            </h3>

<div className="space-y-4">
              {activities.slice(0, 4).map((activity) => (
                <div key={activity.id} className="flex items-start">
                  <div
                    className={`flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center ${
                      activity.type === "prayer"
                        ? "bg-primary/20"
                        : activity.type === "quran"
                          ? "bg-secondary/20"
                          : activity.type === "achievement"
                            ? "bg-accent/20"
                            : "bg-muted"
                    }`}
                  >
                    {activity.type === "prayer" && <BookOpen className="h-4 w-4 text-primary" />}
                    {activity.type === "quran" && <BookOpen className="h-4 w-4 text-secondary" />}
                    {activity.type === "group" && <User className="h-4 w-4 text-muted-foreground" />}
                    {activity.type === "achievement" && <Award className="h-4 w-4 text-accent" />}
                  </div>
                  <div className="ml-3 flex-1">
                    <p className="text-sm">{activity.description}</p>
                    <p className="text-xs text-muted-foreground">{activity.time}</p>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </TabsContent>

<TabsContent value="achievements" className="space-y-4 mt-4">
          <Card className="p-4">
            <div className="flex justify-between items-center mb-4">
              <h3 className="font-medium flex items-center">
                <Award className="h-5 w-5 mr-2 text-primary" />
                Achievements
              </h3>
              <Badge variant="outline">{achievements.length} Total</Badge>
            </div>

<div className="space-y-4">
              {achievements.map((achievement) => (
                <div key={achievement.id} className="border rounded-lg p-3">
                  <div className="flex items-center">
                    <div className="flex-shrink-0 h-10 w-10 bg-accent/20 rounded-full flex items-center justify-center text-xl">
                      {achievement.icon}
                    </div>
                    <div className="ml-3 flex-1">
                      <p className="font-medium">{achievement.name}</p>
                      <p className="text-sm text-muted-foreground">{achievement.description}</p>
                    </div>
                    <div className="text-right text-sm">
                      {achievement.progress === 100 ? (
                        <Badge className="bg-accent text-accent-foreground">Completed</Badge>
                      ) : (
                        <Badge variant="outline">In Progress</Badge>
                      )}
                    </div>
                  </div>

{achievement.progress < 100 && (
                    <div className="mt-3">
                      <div className="flex justify-between text-xs text-muted-foreground mb-1">
                        <span>Progress</span>
                        <span>{achievement.progress}%</span>
                      </div>
                      <Progress value={achievement.progress} className="h-2" />
                    </div>
                  )}

<p className="text-xs text-muted-foreground mt-2">
                    {achievement.progress === 100 ? `Earned on ${achievement.date}` : achievement.date}
                  </p>
                </div>
              ))}
            </div>
          </Card>
        </TabsContent>

<TabsContent value="goals" className="space-y-4 mt-4">
          <Card className="p-4">
            <div className="flex justify-between items-center mb-4">
              <h3 className="font-medium flex items-center">
                <TrendingUp className="h-5 w-5 mr-2 text-primary" />
                Ramadan Goals
              </h3>
              <Button variant="outline" size="sm">
                <Edit className="h-4 w-4 mr-2" />
                Edit Goals
              </Button>
            </div>

<div className="space-y-4">
              {goals.map((goal) => (
                <div key={goal.id} className="border rounded-lg p-3">
                  <div className="flex justify-between items-center">
                    <p className="font-medium">{goal.name}</p>
                    <Badge variant="outline">{goal.target}</Badge>
                  </div>

<div className="mt-3">
                    <div className="flex justify-between text-xs text-muted-foreground mb-1">
                      <span>Progress</span>
                      <span>{goal.progress}%</span>
                    </div>
                    <Progress value={goal.progress} className="h-2 bg-secondary/20">
                      <div className="h-full bg-secondary" style={{ width: `${goal.progress}%` }} />
                    </Progress>
                  </div>
                </div>
              ))}

<Card className="p-4 bg-primary/5 border-primary/20">
            <div className="flex items-center">
              <Award className="h-5 w-5 mr-2 text-primary" />
              <div>
                <h3 className="font-medium">Goal Tip</h3>
                <p className="text-sm text-muted-foreground">
                  Setting specific, achievable goals increases your chances of maintaining consistency throughout
                  Ramadan.
                </p>
              </div>
            </div>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/bottom-navigation.tsx" isEdit="true"
import { Search, BookOpen, Clock, Settings, User, BarChart } from "lucide-react"

interface BottomNavigationProps {
  activeTab: string
  setActiveTab: (tab: string) => void
}

export function BottomNavigation({ activeTab, setActiveTab }: BottomNavigationProps) {
  const tabs = [
    { id: "lookup", label: "Home", icon: Search },
    { id: "namaz", label: "Namaz", icon: BookOpen },
    { id: "timings", label: "Timings", icon: Clock },
    { id: "progress", label: "Progress", icon: BarChart },
    { id: "profile", label: "Profile", icon: User },
    { id: "settings", label: "Settings", icon: Settings },
  ]

return (
    <div className="fixed bottom-0 left-0 right-0 bg-background border-t flex justify-around items-center h-16 px-2">
      {tabs.map((tab) => {
        const Icon = tab.icon
        const isActive = activeTab === tab.id

return (
          <button
            key={tab.id}
            className={`flex flex-col items-center justify-center w-full h-full transition-colors ${
              isActive ? "text-primary" : "text-muted-foreground"
            }`}
            onClick={() => setActiveTab(tab.id)}
          >
            <Icon className={`h-5 w-5 mb-1 ${isActive ? "text-primary" : "text-muted-foreground"}`} />
            <span className="text-xs font-medium">{tab.label}</span>
          </button>
        )
      })}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Home } from "./home"
import { Namaz } from "./namaz"
import { Timings } from "./timings"
import { Settings } from "./settings"
import Profile from "./profile"
import SignIn from "./sign-in"
import { Lookup } from "./lookup"
import { BottomNavigation } from "./components/bottom-navigation"

export default function App() {
  const [activeTab, setActiveTab] = useState("lookup")
  const [isAuthenticated, setIsAuthenticated] = useState(false)

// Simulate checking authentication status
  useEffect(() => {
    // For demo purposes, we'll set authenticated to true after a delay
    // In a real app, you would check for a token or session
    const timer = setTimeout(() => {
      setIsAuthenticated(true)
    }, 1000)

return () => clearTimeout(timer)
  }, [])

if (!isAuthenticated) {
    return <SignIn />
  }

return (
    <div className="flex flex-col h-screen bg-background text-foreground">
      <main className="flex-1 overflow-y-auto pb-16">
        {activeTab === "lookup" && <Lookup />}
        {activeTab === "namaz" && <Namaz />}
        {activeTab === "timings" && <Timings />}
        {activeTab === "progress" && <Home />}
        {activeTab === "profile" && <Profile />}
        {activeTab === "settings" && <Settings />}
      </main>
      <BottomNavigation activeTab={activeTab} setActiveTab={setActiveTab} />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/lookup.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Search, Book, BookOpen, Loader2 } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"

interface Hadith {
  hadithnumber: string
  text: string
}

export function Lookup() {
  const [activeTab, setActiveTab] = useState("hadith")
  const [searchQuery, setSearchQuery] = useState("")
  const [hadithEdition, setHadithEdition] = useState("eng-abudawud")
  const [quranEdition, setQuranEdition] = useState("eng-muhammadali")
  const [searchResults, setSearchResults] = useState<Hadith[]>([])
  const [allHadiths, setAllHadiths] = useState<Hadith[]>([])
  const [isLoading, setIsLoading] = useState(false)

useEffect(() => {
    fetchAllHadiths()
  }, []) // Removed hadithEdition from dependencies

const fetchAllHadiths = async () => {
    setIsLoading(true)
    try {
      const response = await fetch(
        `https://cdn.jsdelivr.net/gh/fawazahmed0/hadith-api@1/editions/${hadithEdition}.json`,
      )
      const data = await response.json()
      setAllHadiths(data.hadiths)
    } catch (error) {
      console.error("Error fetching hadiths:", error)
    }
    setIsLoading(false)
  }

const handleSearch = () => {
    if (!searchQuery) {
      setSearchResults([])
      return
    }

if (activeTab === "hadith") {
      const filteredHadiths = allHadiths.filter((hadith) =>
        hadith.text.toLowerCase().includes(searchQuery.toLowerCase()),
      )
      setSearchResults(filteredHadiths.slice(0, 10)) // Limit to 10 results for performance
    } else {
      // For Quran, we'll keep the existing logic
      handleQuranSearch()
    }
  }

const handleQuranSearch = async () => {
    setIsLoading(true)
    const [chapter, verse] = searchQuery.split(":")
    const apiUrl = `https://cdn.jsdelivr.net/gh/fawazahmed0/quran-api@1/editions/${quranEdition}/${chapter}/${verse}.json`

try {
      const response = await fetch(apiUrl)
      const data = await response.json()
      setSearchResults([data])
    } catch (error) {
      console.error("Error fetching Quran data:", error)
      setSearchResults([])
    }
    setIsLoading(false)
  }

return (
    <div className="container max-w-4xl mx-auto px-4 py-8 space-y-8">
      <div className="text-center">
        <h1 className="text-3xl font-bold text-primary mb-2">سبیل</h1>
        <p className="text-xl text-muted-foreground">Explore Hadith & Quran</p>
      </div>

<Card className="p-6">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="hadith">Hadith</TabsTrigger>
            <TabsTrigger value="quran">Quran</TabsTrigger>
          </TabsList>

<TabsContent value="hadith" className="space-y-4">
            <Select value={hadithEdition} onValueChange={setHadithEdition}>
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select Hadith Edition" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="eng-abudawud">Abu Dawud (English)</SelectItem>
                <SelectItem value="ara-abudawud">Abu Dawud (Arabic)</SelectItem>
                {/* Add more hadith editions as needed */}
              </SelectContent>
            </Select>

<div className="flex space-x-2">
              <Input
                type="text"
                placeholder="Enter keyword to search hadith"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="flex-grow"
              />
              <Button onClick={handleSearch} disabled={isLoading}>
                {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
                <span className="ml-2">Search</span>
              </Button>
            </div>
          </TabsContent>

<TabsContent value="quran" className="space-y-4">
            <Select value={quranEdition} onValueChange={setQuranEdition}>
              <SelectTrigger className="w-full">
                <SelectValue placeholder="Select Quran Edition" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="eng-muhammadali">Muhammad Ali (English)</SelectItem>
                <SelectItem value="ara-quran">Arabic</SelectItem>
                {/* Add more Quran editions as needed */}
              </SelectContent>
            </Select>

<div className="flex space-x-2">
              <Input
                type="text"
                placeholder="Enter chapter:verse (e.g., 2:255)"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="flex-grow"
              />
              <Button onClick={handleSearch} disabled={isLoading}>
                {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Search className="w-4 h-4" />}
                <span className="ml-2">Search</span>
              </Button>
            </div>
          </TabsContent>
        </Tabs>
      </Card>

{searchResults.length > 0 && (
        <div className="space-y-6">
          {searchResults.map((result, index) => (
            <Card key={index} className="p-6">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-xl font-semibold flex items-center">
                  {activeTab === "hadith" ? (
                    <>
                      <Book className="w-5 h-5 mr-2 text-primary" />
                      Hadith
                    </>
                  ) : (
                    <>
                      <BookOpen className="w-5 h-5 mr-2 text-primary" />
                      Quran Verse
                    </>
                  )}
                </h2>
                <Badge variant="outline">
                  {activeTab === "hadith"
                    ? `Hadith No: ${result.hadithnumber}`
                    : `Chapter: ${result.chapter}, Verse: ${result.verse}`}
                </Badge>
              </div>
              <p className="text-lg leading-relaxed">{result.text}</p>
            </Card>
          ))}
        </div>
      )}

{searchResults.length === 0 && searchQuery && !isLoading && (
        <Card className="p-6 text-center">
          <p className="text-muted-foreground">No results found. Try a different search term.</p>
        </Card>
      )}
    </div>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This