- {title}
- {subTitle}
+ {title}
+ {subTitle}
{badgeValue && (
-
{children}
+
{children}
);
diff --git a/src/components/Projects/ProjectsCardList.tsx b/src/components/Projects/ProjectsCardList.tsx
index caec5f92..4debad38 100644
--- a/src/components/Projects/ProjectsCardList.tsx
+++ b/src/components/Projects/ProjectsCardList.tsx
@@ -1,11 +1,13 @@
"use client";
-import { T } from "@/components/ui/Typography";
-import type { Table } from "@/types";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Table } from "@/types";
import { format } from "date-fns";
-import { CalendarDays } from "lucide-react";
+import { motion } from "framer-motion";
+import { CalendarDays, Clock, Link as LinkIcon } from "lucide-react";
import Link from "next/link";
-import { ProjectBadge } from "../ui/badge-project";
-import { Card, CardContent, CardFooter, CardHeader } from "../ui/card";
export enum ProjectStatus {
draft = "draft",
@@ -14,6 +16,30 @@ export enum ProjectStatus {
completed = "completed",
}
+const statusEmojis = {
+ draft: "📝",
+ pending_approval: "⏳",
+ approved: "🏗️",
+ completed: "✅",
+};
+
+const MotionCard = motion(Card);
+const MotionCardContent = motion(CardContent);
+
+const cardVariants = {
+ hidden: { opacity: 0, y: 20 },
+ visible: { opacity: 1, y: 0 },
+};
+
+const contentVariants = {
+ hidden: { opacity: 0 },
+ visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
+};
+
+const itemVariants = {
+ hidden: { opacity: 0, y: 10 },
+ visible: { opacity: 1, y: 0 },
+};
export const ProjectsCardList = ({
projects,
@@ -22,33 +48,55 @@ export const ProjectsCardList = ({
}) => {
if (projects.length === 0) {
return (
-
+
🔍 No matching projects found.
-
+
);
}
+
return (
-
- {projects.slice(0, 5).map((project) => (
-
-
-
-
-
{ProjectStatus[project.project_status]}
-
{project.name}
-
-
-
-
- {format(new Date(project.created_at), "dd MMMM, yyyy")}
-
-
-
-
- ))}
-
+
+
+ {projects.slice(0, 5).map((project, index) => (
+
+
+
+
+
+ {statusEmojis[project.project_status]} {capitalizeFirstLetter(project.project_status)}
+
+ ID: {project.id.slice(0, 7)}
+
+ {project.name}
+
+
+ Created: {format(new Date(project.created_at), "dd MMM yyyy")}
+
+
+
+ Updated: {format(new Date(project.updated_at), "dd MMM yyyy")}
+
+
+
+ /{project.slug}
+
+
+
+
+ ))}
+
+
+
);
};
+
+function capitalizeFirstLetter(string: string) {
+ return string.charAt(0).toUpperCase() + string.slice(1);
+}
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
index 36b01a19..1b6522af 100644
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -1,10 +1,11 @@
'use client';
import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useDebouncedCallback } from 'use-debounce';
-export function Search({ placeholder }: { placeholder: string }) {
+export function Search({ placeholder, className }: { placeholder: string, className?: string }) {
const searchParams = useSearchParams();
const { replace } = useRouter();
const pathname = usePathname();
@@ -25,7 +26,7 @@ export function Search({ placeholder }: { placeholder: string }) {
}, 300);
return (
-
+
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 87acbb46..a8a3233b 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -5,65 +5,57 @@
@layer base {
:root {
--background: 0 0% 100%;
- --foreground: 222.2 84% 4.9%;
+ --foreground: 240 10% 3.9%;
--card: 0 0% 100%;
- --card-foreground: 222.2 84% 4.9%;
+ --card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
- --popover-foreground: 222.2 84% 4.9%;
- --primary: 222.2 47.4% 11.2%;
- --primary-foreground: 210 40% 98%;
- --secondary: 210 40% 96.1%;
- --secondary-foreground: 222.2 47.4% 11.2%;
- --muted: 210 40% 96.1%;
- --muted-foreground: 215.4 16.3% 46.9%;
- --accent: 210 40% 96.1%;
- --accent-foreground: 222.2 47.4% 11.2%;
+ --popover-foreground: 240 10% 3.9%;
+ --primary: 240 5.9% 10%;
+ --primary-foreground: 0 0% 98%;
+ --secondary: 240 4.8% 95.9%;
+ --secondary-foreground: 240 5.9% 10%;
+ --muted: 240 4.8% 95.9%;
+ --muted-foreground: 240 3.8% 46.1%;
+ --accent: 240 4.8% 95.9%;
+ --accent-foreground: 240 5.9% 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%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 5.9% 90%;
+ --input: 240 5.9% 90%;
+ --ring: 240 10% 3.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 40% 98%;
- --primary-foreground: 222.2 47.4% 11.2%;
- --secondary: 217.2 32.6% 17.5%;
- --secondary-foreground: 210 40% 98%;
- --muted: 217.2 32.6% 17.5%;
- --muted-foreground: 215 20.2% 65.1%;
- --accent: 217.2 32.6% 17.5%;
- --accent-foreground: 210 40% 98%;
- --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 {
- :root {
- --chart-1: 12 76% 61%;
- --chart-2: 173 58% 39%;
+ --chart-1: 173 58% 39%;
+ --chart-2: 12 76% 61%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
}
.dark {
+ --background: 240 10% 3.9%;
+ --foreground: 0 0% 98%;
+ --card: 240 10% 3.9%;
+ --card-foreground: 0 0% 98%;
+ --popover: 240 10% 3.9%;
+ --popover-foreground: 0 0% 98%;
+ --primary: 0 0% 98%;
+ --primary-foreground: 240 5.9% 10%;
+ --secondary: 240 3.7% 15.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 240 3.7% 15.9%;
+ --muted-foreground: 240 5% 64.9%;
+ --accent: 240 3.7% 15.9%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 3.7% 15.9%;
+ --input: 240 3.7% 15.9%;
+ --ring: 240 4.9% 83.9%;
--chart-1: 220 70% 50%;
- --chart-2: 160 60% 45%;
+ --chart-5: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
- --chart-5: 340 75% 55%;
+ --chart-2: 340 75% 55%;
}
}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 4d5e9d43..897db6c0 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -3,11 +3,7 @@ const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
darkMode: ['class'],
- content: [
- './src/**/*.{js,ts,jsx,tsx,mdx}',
- './node_modules/@tremor/**/*.{js,ts,jsx,tsx,mdx}',
- ],
-
+ content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
prefix: '',
theme: {
transparent: 'transparent',
@@ -99,39 +95,10 @@ module.exports = {
},
},
},
- safelist: [
- {
- pattern:
- /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
- variants: ['hover', 'ui-selected'],
- },
- {
- pattern:
- /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
- variants: ['hover', 'ui-selected'],
- },
- {
- pattern:
- /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
- variants: ['hover', 'ui-selected'],
- },
- {
- pattern:
- /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
- },
- {
- pattern:
- /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
- },
- {
- pattern:
- /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
- },
- ],
+
plugins: [
require('tailwindcss-animate'),
require('@tailwindcss/typography'),
- require('@headlessui/tailwindcss'),
require('@tailwindcss/forms'),
],
};