import type { Config } from "tailwindcss"; export default { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", ], 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: "#047857", foreground: "#ffffff", }, secondary: { DEFAULT: "#CA8A04", foreground: "#ffffff", }, accent: { DEFAULT: "#F3F4F6", foreground: "#1F2937", }, }, 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" }, }, fadeIn: { "0%": { opacity: "0" }, "100%": { opacity: "1" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", fadeIn: "fadeIn 0.5s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { cn } from "@/lib/utils"; interface PrayerCardProps { title: string; content: string; className?: string; } export const PrayerCard = ({ title, content, className }: PrayerCardProps) => { return (
{title}
{content}
); }; import { Input } from "@/components/ui/input"; import { Search } from "lucide-react"; interface SearchBarProps { onSearch: (query: string) => void; } export const SearchBar = ({ onSearch }: SearchBarProps) => { return (
onSearch(e.target.value)} />
); }; import { useState } from "react"; import { PrayerCard } from "@/components/PrayerCard"; import { SearchBar } from "@/components/SearchBar"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; const prayers = { daily: [ { title: "دعاء اليوم الأول", content: "اللَّهُمَّ اجْعَلْ صِيَامِي فِيهِ صِيَامَ الصَّائِمِينَ، وَقِيَامِي فِيهِ قِيَامَ القَائِمِينَ", }, { title: "دعاء اليوم الثاني", content: "اللَّهُمَّ قَرِّبْنِي فِيهِ إِلَى مَرْضَاتِكَ، وَجَنِّبْنِي فِيهِ مِنْ سَخَطِكَ وَنَقِمَاتِكَ", }, ], suhoorIftar: [ { title: "دعاء السحور", content: "اللَّهُمَّ إِنِّي أَصُومُ غَدًا فَاغْفِرْ لِي مَا قَدَّمْتُ وَمَا أَخَّرْتُ", }, { title: "دعاء الإفطار", content: "اللَّهُمَّ لَكَ صُمْتُ وَعَلَى رِزْقِكَ أَفْطَرْتُ", }, ], morningEvening: [ { title: "أذكار الصباح", content: "أَصْبَحْنَا وَأَصْبَحَ الْمُلْكُ لِلَّهِ، وَالْحَمْدُ لِلَّهِ، لَا إِلَٰهَ إِلَّا اللَّهُ وَحْدَهُ لَا شَرِيكَ لَهُ", }, { title: "أذكار المساء", content: "أَمْسَيْنَا وَأَمْسَى الْمُلْكُ لِلَّهِ، وَالْحَمْدُ لِلَّهِ، لَا إِلَٰهَ إِلَّا اللَّهُ وَحْدَهُ لَا شَرِيكَ لَهُ", }, ], laylatAlQadr: [ { title: "دعاء ليلة القدر", content: "اللَّهُمَّ إِنَّكَ عَفُوٌّ تُحِبُّ الْعَفْوَ فَاعْفُ عَنِّي", }, ], }; const Index = () => { const [searchQuery, setSearchQuery] = useState(""); const filterPrayers = (prayerList: typeof prayers.daily) => { return prayerList.filter( (prayer) => prayer.title.toLowerCase().includes(searchQuery.toLowerCase()) || prayer.content.toLowerCase().includes(searchQuery.toLowerCase()) ); }; return (
أدعية رمضان
الأدعية اليومية
السحور والإفطار
أذكار الصباح والمساء
ليلة القدر
{filterPrayers(prayers.daily).map((prayer, index) => (
))}
{filterPrayers(prayers.suhoorIftar).map((prayer, index) => (
))}
{filterPrayers(prayers.morningEvening).map((prayer, index) => (
))}
{filterPrayers(prayers.laylatAlQadr).map((prayer, index) => (
))}
); }; export default Index;