chore: update dependencies and configuration for Tailwind CSS
- Added "@tailwindcss/postcss" to package.json dependencies. - Updated "tailwindcss" version to "^4.3.0" in package.json. - Modified postcss.config.mjs to use "@tailwindcss/postcss" instead of "tailwindcss". - Changed darkMode configuration in tailwind.config.ts to a string format.
This commit is contained in:
Poyraz Avsever
@@ -505,6 +505,14 @@ Notlar:
|
||||
- Modul sayfalari Faz 2'de CRUD gelistirme sirasinda Poyraz UI'a tasinir.
|
||||
- Poyraz UI rehberi: `poyraz-ui-usage-guide.md`
|
||||
|
||||
Faz 1.5 repo ciktisi:
|
||||
|
||||
- Poyraz UI paketi projeye eklendi.
|
||||
- Tailwind CSS v4 ve `@tailwindcss/postcss` gecisi yapildi.
|
||||
- Global CSS, `poyraz-ui/preset.css` ve light Poyraz tokenlariyla guncellendi.
|
||||
- Login ve register sayfalari Poyraz UI atomlariyla yeniden kuruldu.
|
||||
- Dashboard shell ve sidebar Poyraz UI organism yaklasimina tasindi.
|
||||
|
||||
---
|
||||
|
||||
### Faz 2: Core CRUD Modulleri
|
||||
|
||||
+68
-52
@@ -1,67 +1,81 @@
|
||||
@import "tailwindcss/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
@import "tailwindcss";
|
||||
@import "poyraz-ui/preset.css";
|
||||
|
||||
@source "../app/**/*.{js,ts,jsx,tsx,mdx}";
|
||||
@source "../components/**/*.{js,ts,jsx,tsx,mdx}";
|
||||
@source "../config/**/*.{js,ts,jsx,tsx,mdx}";
|
||||
|
||||
@layer base {
|
||||
:root, .dark {
|
||||
/* Deeper premium dark mode background */
|
||||
--background: #120D1C;
|
||||
--background-dark: #0A0710;
|
||||
--foreground: #FBF9FE;
|
||||
:root {
|
||||
--poyraz-background: #ffffff;
|
||||
--poyraz-foreground: #101828;
|
||||
--poyraz-primary: #dc2626;
|
||||
--poyraz-primary-foreground: #ffffff;
|
||||
--poyraz-primary-hover: #b91c1c;
|
||||
--poyraz-primary-active: #991b1b;
|
||||
--poyraz-primary-muted: #fef2f2;
|
||||
--poyraz-primary-muted-foreground: #b91c1c;
|
||||
--poyraz-secondary: #f8fafc;
|
||||
--poyraz-secondary-foreground: #101828;
|
||||
--poyraz-muted: #f8fafc;
|
||||
--poyraz-muted-foreground: #667085;
|
||||
--poyraz-accent: #f1f5f9;
|
||||
--poyraz-accent-hover: #e2e8f0;
|
||||
--poyraz-accent-foreground: #101828;
|
||||
--poyraz-border: #e4e7ec;
|
||||
--poyraz-border-strong: #d0d5dd;
|
||||
--poyraz-input: #98a2b3;
|
||||
--poyraz-ring: #dc2626;
|
||||
--poyraz-card: #ffffff;
|
||||
--poyraz-card-foreground: #101828;
|
||||
|
||||
--card: #1F172B;
|
||||
--card-foreground: #FBF9FE;
|
||||
|
||||
--popover: #1F172B;
|
||||
--popover-foreground: #FBF9FE;
|
||||
|
||||
--primary: #6C5BB0;
|
||||
--primary-foreground: #FFFFFF;
|
||||
--primary-hover: #594D9F;
|
||||
--primary-pressed: #493D90;
|
||||
|
||||
--secondary: #2B2538;
|
||||
--secondary-foreground: #C0B8D6;
|
||||
|
||||
--muted: #3B3448;
|
||||
--muted-foreground: #8F89A5;
|
||||
|
||||
--accent: #3B3448;
|
||||
--accent-foreground: #FBF9FE;
|
||||
|
||||
--destructive: #d8644a;
|
||||
--destructive-foreground: #FBF9FE;
|
||||
|
||||
--border: #3B3448;
|
||||
--input: #3B3448;
|
||||
--input-bg: #1A1325;
|
||||
--overlay: #000000;
|
||||
|
||||
--ring: #6C5BB0;
|
||||
|
||||
--radius: 0.75rem;
|
||||
/* Legacy aliases kept until all prototype pages move to Poyraz UI. */
|
||||
--background: var(--poyraz-background);
|
||||
--background-dark: #f8fafc;
|
||||
--foreground: var(--poyraz-foreground);
|
||||
--card: var(--poyraz-card);
|
||||
--card-foreground: var(--poyraz-card-foreground);
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: var(--poyraz-foreground);
|
||||
--primary: var(--poyraz-primary);
|
||||
--primary-foreground: var(--poyraz-primary-foreground);
|
||||
--primary-hover: var(--poyraz-primary-hover);
|
||||
--primary-pressed: var(--poyraz-primary-active);
|
||||
--secondary: var(--poyraz-secondary);
|
||||
--secondary-foreground: var(--poyraz-secondary-foreground);
|
||||
--muted: var(--poyraz-muted);
|
||||
--muted-foreground: var(--poyraz-muted-foreground);
|
||||
--accent: var(--poyraz-accent);
|
||||
--accent-foreground: var(--poyraz-accent-foreground);
|
||||
--destructive: #ef4444;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: var(--poyraz-border);
|
||||
--input: var(--poyraz-input);
|
||||
--input-bg: #ffffff;
|
||||
--overlay: rgba(15, 23, 42, 0.48);
|
||||
--ring: var(--poyraz-ring);
|
||||
--radius: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply text-foreground;
|
||||
background: linear-gradient(135deg, var(--background), var(--background-dark));
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
@apply min-h-screen bg-background text-foreground antialiased;
|
||||
}
|
||||
|
||||
/* Fix for Chrome autofill turning inputs yellow/olive */
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
|
||||
-webkit-text-fill-color: var(--foreground) !important;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
-webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
|
||||
-webkit-text-fill-color: var(--foreground) !important;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,15 +84,17 @@
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.tiny-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tiny-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: theme('colors.primary.DEFAULT' / 30%);
|
||||
background: color-mix(in srgb, var(--poyraz-primary) 30%, transparent);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tiny-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: theme('colors.primary.DEFAULT' / 60%);
|
||||
background: color-mix(in srgb, var(--poyraz-primary) 55%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+3
-3
@@ -7,8 +7,8 @@ import { Toaster } from "react-hot-toast";
|
||||
const geist = Geist({ subsets: ["latin"], variable: "--font-sans" });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Cognis - Your AI Assistant",
|
||||
description: "Productivity Dashboard - AI-Powered Personal Life and Planning Dashboard",
|
||||
title: "Cognis",
|
||||
description: "Self-hosted freelancer operating dashboard",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -19,7 +19,7 @@ export default function RootLayout({
|
||||
return (
|
||||
<html
|
||||
lang="tr"
|
||||
className={cn("font-sans dark", geist.variable)}
|
||||
className={cn("font-sans", geist.variable)}
|
||||
suppressHydrationWarning
|
||||
>
|
||||
<body>
|
||||
|
||||
+36
-42
@@ -1,50 +1,52 @@
|
||||
import { login } from '@/app/login/actions'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import Link from 'next/link'
|
||||
import { ErrorToaster } from '@/components/error-toaster'
|
||||
import { Icon } from '@/components/ui/icon'
|
||||
import { AuthPageShell } from '@/components/auth/auth-page-shell'
|
||||
import { login } from "@/app/login/actions";
|
||||
import { AuthPageShell } from "@/components/auth/auth-page-shell";
|
||||
import { ErrorToaster } from "@/components/error-toaster";
|
||||
import { LockKeyhole, LogIn, Mail, Search } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Button, Input, Label } from "poyraz-ui/atoms";
|
||||
|
||||
export default async function LoginPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
|
||||
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
|
||||
}) {
|
||||
const resolvedParams = await searchParams
|
||||
const error = resolvedParams?.error
|
||||
const message = resolvedParams?.message
|
||||
const resolvedParams = await searchParams;
|
||||
const error = resolvedParams?.error;
|
||||
const message = resolvedParams?.message;
|
||||
|
||||
return (
|
||||
<>
|
||||
{error && message && <ErrorToaster message={String(message)} />}
|
||||
<AuthPageShell
|
||||
title="Tekrar Hoş Geldiniz"
|
||||
description="Kişisel alanınıza ulaşmak için giriş yapın"
|
||||
imageSrc="/images/1830857_Image.png"
|
||||
imageAlt="MindSpace Background"
|
||||
imageSide="left"
|
||||
title="Giriş yap"
|
||||
description="Cognis çalışma alanına erişmek için hesabına giriş yap."
|
||||
form={
|
||||
<form className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">E-posta</Label>
|
||||
<Label htmlFor="email" className="flex items-center gap-2">
|
||||
<Mail className="h-4 w-4 text-muted-foreground" />
|
||||
E-posta
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="ornek@mail.com"
|
||||
required
|
||||
className="h-11 bg-input-bg border-border"
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="password">Şifre</Label>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<Label htmlFor="password" className="flex items-center gap-2">
|
||||
<LockKeyhole className="h-4 w-4 text-muted-foreground" />
|
||||
Şifre
|
||||
</Label>
|
||||
<Link
|
||||
href="/forgot-password"
|
||||
className="text-sm font-medium text-primary hover:text-primary-hover transition-colors"
|
||||
className="text-sm font-medium text-primary transition-colors hover:text-primary-hover"
|
||||
>
|
||||
Şifremi unuttum
|
||||
</Link>
|
||||
@@ -54,16 +56,14 @@ export default async function LoginPage({
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
className="h-11 bg-input-bg border-border"
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
formAction={login}
|
||||
className="w-full h-11 text-base font-medium shadow-md transition-transform active:scale-[0.98] bg-primary hover:bg-primary-hover text-primary-foreground"
|
||||
>
|
||||
Giriş Yap
|
||||
<Button formAction={login} className="h-11 w-full gap-2">
|
||||
<LogIn className="h-4 w-4" />
|
||||
Giriş yap
|
||||
</Button>
|
||||
</form>
|
||||
}
|
||||
@@ -74,34 +74,28 @@ export default async function LoginPage({
|
||||
<span className="w-full border-t border-border" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-background px-2 text-muted-foreground">
|
||||
veya
|
||||
</span>
|
||||
<span className="bg-background px-2 text-muted-foreground">veya</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="w-full h-11 text-base font-medium bg-card border-border hover:bg-secondary transition-colors"
|
||||
>
|
||||
<Icon icon="flat-color-icons:google" className="w-5 h-5 mr-2" />
|
||||
Google ile Devam Et
|
||||
<Button type="button" variant="outline" className="h-11 w-full gap-2">
|
||||
<Search className="h-4 w-4" />
|
||||
Google ile devam et
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
footer={
|
||||
<div className="text-center text-sm">
|
||||
Hesabınız yok mu?{' '}
|
||||
Hesabın yok mu?{" "}
|
||||
<Link
|
||||
href="/register"
|
||||
className="font-medium text-primary hover:text-primary-hover transition-colors"
|
||||
className="font-medium text-primary transition-colors hover:text-primary-hover"
|
||||
>
|
||||
Kayıt Ol
|
||||
Kayıt ol
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
+34
-40
@@ -1,61 +1,61 @@
|
||||
import { signup } from '@/app/login/actions'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import Link from 'next/link'
|
||||
import { ErrorToaster } from '@/components/error-toaster'
|
||||
import { Icon } from '@/components/ui/icon'
|
||||
import { AuthPageShell } from '@/components/auth/auth-page-shell'
|
||||
import { signup } from "@/app/login/actions";
|
||||
import { AuthPageShell } from "@/components/auth/auth-page-shell";
|
||||
import { ErrorToaster } from "@/components/error-toaster";
|
||||
import { LockKeyhole, Mail, Search, UserPlus } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Button, Input, Label } from "poyraz-ui/atoms";
|
||||
|
||||
export default async function RegisterPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
|
||||
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
|
||||
}) {
|
||||
const resolvedParams = await searchParams
|
||||
const error = resolvedParams?.error
|
||||
const message = resolvedParams?.message
|
||||
const resolvedParams = await searchParams;
|
||||
const error = resolvedParams?.error;
|
||||
const message = resolvedParams?.message;
|
||||
|
||||
return (
|
||||
<>
|
||||
{error && message && <ErrorToaster message={String(message)} />}
|
||||
<AuthPageShell
|
||||
title="Aramıza Katılın"
|
||||
description="Kişisel yaşam alanınızı oluşturmak için kayıt olun"
|
||||
imageSrc="/images/1830837_Image.png"
|
||||
imageAlt="MindSpace Background"
|
||||
imageSide="right"
|
||||
title="Kayıt ol"
|
||||
description="Freelancer operasyon panelini kullanmak için hesabını oluştur."
|
||||
form={
|
||||
<form className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">E-posta</Label>
|
||||
<Label htmlFor="email" className="flex items-center gap-2">
|
||||
<Mail className="h-4 w-4 text-muted-foreground" />
|
||||
E-posta
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="ornek@mail.com"
|
||||
required
|
||||
className="h-11 bg-input-bg border-border"
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Şifre</Label>
|
||||
<Label htmlFor="password" className="flex items-center gap-2">
|
||||
<LockKeyhole className="h-4 w-4 text-muted-foreground" />
|
||||
Şifre
|
||||
</Label>
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
className="h-11 bg-input-bg border-border"
|
||||
className="h-11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
formAction={signup}
|
||||
className="w-full h-11 text-base font-medium shadow-md transition-transform active:scale-[0.98] bg-primary hover:bg-primary-hover text-primary-foreground"
|
||||
>
|
||||
Kayıt Ol
|
||||
<Button formAction={signup} className="h-11 w-full gap-2">
|
||||
<UserPlus className="h-4 w-4" />
|
||||
Hesap oluştur
|
||||
</Button>
|
||||
</form>
|
||||
}
|
||||
@@ -66,34 +66,28 @@ export default async function RegisterPage({
|
||||
<span className="w-full border-t border-border" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-background px-2 text-muted-foreground">
|
||||
veya
|
||||
</span>
|
||||
<span className="bg-background px-2 text-muted-foreground">veya</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="w-full h-11 text-base font-medium bg-card border-border hover:bg-secondary transition-colors"
|
||||
>
|
||||
<Icon icon="flat-color-icons:google" className="w-5 h-5 mr-2" />
|
||||
Google ile Devam Et
|
||||
<Button type="button" variant="outline" className="h-11 w-full gap-2">
|
||||
<Search className="h-4 w-4" />
|
||||
Google ile devam et
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
footer={
|
||||
<div className="text-center text-sm">
|
||||
Zaten hesabınız var mı?{' '}
|
||||
Zaten hesabın var mı?{" "}
|
||||
<Link
|
||||
href="/login"
|
||||
className="font-medium text-primary hover:text-primary-hover transition-colors"
|
||||
className="font-medium text-primary transition-colors hover:text-primary-hover"
|
||||
>
|
||||
Giriş Yap
|
||||
Giriş yap
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
+168
-174
@@ -1,191 +1,185 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import type { ReactNode } from "react"
|
||||
import Image from "next/image"
|
||||
import { motion, useReducedMotion } from "framer-motion"
|
||||
import { cn } from "@/lib/utils"
|
||||
import type { ReactNode } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
import {
|
||||
ArrowUpRight,
|
||||
BarChart3,
|
||||
CalendarDays,
|
||||
Kanban,
|
||||
Wallet,
|
||||
} from "lucide-react";
|
||||
import { Typography } from "poyraz-ui/atoms";
|
||||
|
||||
type AuthPageShellProps = {
|
||||
title: string
|
||||
description: string
|
||||
imageSrc: string
|
||||
imageAlt: string
|
||||
imageSide: "left" | "right"
|
||||
form: ReactNode
|
||||
secondaryAction?: ReactNode
|
||||
footer: ReactNode
|
||||
}
|
||||
title: string;
|
||||
description: string;
|
||||
imageSrc?: string;
|
||||
imageAlt?: string;
|
||||
imageSide?: "left" | "right";
|
||||
form: ReactNode;
|
||||
secondaryAction?: ReactNode;
|
||||
footer: ReactNode;
|
||||
};
|
||||
|
||||
const highlights = [
|
||||
{ label: "Müşteriler", icon: Kanban },
|
||||
{ label: "Takvim", icon: CalendarDays },
|
||||
{ label: "Finans", icon: Wallet },
|
||||
{ label: "Raporlar", icon: BarChart3 },
|
||||
];
|
||||
|
||||
export function AuthPageShell({
|
||||
title,
|
||||
description,
|
||||
imageSrc,
|
||||
imageAlt,
|
||||
imageSide,
|
||||
form,
|
||||
secondaryAction,
|
||||
footer,
|
||||
}: AuthPageShellProps) {
|
||||
const reducedMotion = useReducedMotion()
|
||||
const reducedMotion = useReducedMotion();
|
||||
|
||||
const stackVariants = {
|
||||
hidden: {},
|
||||
show: {
|
||||
transition: reducedMotion
|
||||
? undefined
|
||||
: {
|
||||
staggerChildren: 0.1,
|
||||
delayChildren: 0.15,
|
||||
},
|
||||
const fadeUp = {
|
||||
initial: reducedMotion ? false : { opacity: 0, y: 18 },
|
||||
animate: { opacity: 1, y: 0 },
|
||||
transition: {
|
||||
duration: reducedMotion ? 0 : 0.55,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
},
|
||||
}
|
||||
|
||||
const itemVariants = {
|
||||
hidden: reducedMotion ? { opacity: 1 } : { opacity: 0, y: 24 },
|
||||
show: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: reducedMotion ? 0 : 0.65,
|
||||
ease: [0.22, 1, 0.36, 1] as const,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const formPanel = (
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0, x: imageSide === "left" ? 36 : -36 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{
|
||||
duration: reducedMotion ? 0 : 0.8,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
}}
|
||||
className="flex flex-1 items-center justify-center p-8 w-full lg:w-1/2"
|
||||
>
|
||||
<motion.div
|
||||
variants={stackVariants}
|
||||
initial="hidden"
|
||||
animate="show"
|
||||
className="w-full max-w-sm space-y-8"
|
||||
>
|
||||
<motion.div variants={itemVariants} className="text-center lg:text-left">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground mt-2">{description}</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={itemVariants}>{form}</motion.div>
|
||||
|
||||
{secondaryAction ? (
|
||||
<motion.div variants={itemVariants}>{secondaryAction}</motion.div>
|
||||
) : null}
|
||||
|
||||
<motion.div variants={itemVariants}>{footer}</motion.div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)
|
||||
|
||||
const imagePanel = (
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0, x: imageSide === "left" ? -42 : 42 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{
|
||||
duration: reducedMotion ? 0 : 0.95,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
}}
|
||||
className="hidden lg:flex lg:w-1/2 p-4 relative"
|
||||
>
|
||||
<div className="relative w-full h-full overflow-hidden rounded-2xl">
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { scale: 1.08, filter: "blur(6px)" }}
|
||||
animate={{ scale: 1, filter: "blur(0px)" }}
|
||||
transition={{
|
||||
duration: reducedMotion ? 0 : 1.2,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
}}
|
||||
className="absolute inset-0"
|
||||
>
|
||||
<Image src={imageSrc} alt={imageAlt} fill className="object-cover" priority />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0 }}
|
||||
animate={{ opacity: 0.9 }}
|
||||
transition={{ duration: reducedMotion ? 0 : 0.9, delay: reducedMotion ? 0 : 0.1 }}
|
||||
className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/30"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0, scale: 0.92 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{
|
||||
duration: reducedMotion ? 0 : 1.1,
|
||||
delay: reducedMotion ? 0 : 0.2,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
}}
|
||||
className="absolute inset-0 bg-[radial-gradient(circle_at_50%_18%,rgba(255,255,255,0.18),transparent_46%)]"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0, y: 26 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
duration: reducedMotion ? 0 : 0.85,
|
||||
delay: reducedMotion ? 0 : 0.32,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
}}
|
||||
className="absolute bottom-0 left-0 right-0 flex items-center justify-center pointer-events-none z-10"
|
||||
>
|
||||
<motion.div
|
||||
animate={
|
||||
reducedMotion
|
||||
? undefined
|
||||
: {
|
||||
y: [0, -8, 0],
|
||||
scale: [1, 1.02, 1],
|
||||
}
|
||||
}
|
||||
transition={
|
||||
reducedMotion
|
||||
? undefined
|
||||
: {
|
||||
duration: 8,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}
|
||||
}
|
||||
className="relative drop-shadow-2xl flex items-center gap-4"
|
||||
>
|
||||
<Image
|
||||
src="/logo/logo.png"
|
||||
alt="MindSpace Logo"
|
||||
width={256}
|
||||
height={128}
|
||||
className="object-contain w-64 h-auto"
|
||||
priority
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative isolate flex min-h-screen overflow-hidden bg-background">
|
||||
{imageSide === "left" ? imagePanel : null}
|
||||
{formPanel}
|
||||
{imageSide === "right" ? imagePanel : null}
|
||||
<main className="min-h-screen bg-background text-foreground">
|
||||
<div className="grid min-h-screen grid-cols-1 lg:grid-cols-[minmax(0,1fr)_480px]">
|
||||
<motion.section
|
||||
initial={reducedMotion ? false : { opacity: 0, x: -28 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{
|
||||
duration: reducedMotion ? 0 : 0.75,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
}}
|
||||
className="relative hidden overflow-hidden bg-primary text-primary-foreground lg:flex lg:flex-col lg:justify-between"
|
||||
>
|
||||
<div className="absolute inset-0 opacity-20 bg-[linear-gradient(rgba(255,255,255,.18)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,.18)_1px,transparent_1px)] bg-size-[32px_32px]" />
|
||||
<div className="relative z-10 flex items-center gap-4 p-10">
|
||||
<Image
|
||||
src="/logo/LogoWithBg.png"
|
||||
alt="Cognis logo"
|
||||
width={64}
|
||||
height={64}
|
||||
className="h-16 w-16 rounded-sm object-cover border border-red-500"
|
||||
priority
|
||||
/>
|
||||
<div>
|
||||
<div className="text-lg font-bold leading-none">Cognis</div>
|
||||
<div className="mt-1 text-sm text-primary-foreground/75">
|
||||
Freelancer OS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: reducedMotion ? 0 : 1.4 }}
|
||||
className={cn(
|
||||
"pointer-events-none absolute inset-0 -z-10",
|
||||
"bg-[radial-gradient(circle_at_top,rgba(108,91,176,0.12),transparent_42%)]",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
<div className="relative z-10 px-10">
|
||||
<motion.div {...fadeUp}>
|
||||
<Typography
|
||||
variant="h1"
|
||||
className="max-w-2xl text-5xl leading-[1.02] text-primary-foreground"
|
||||
>
|
||||
Freelancer işlerini, müşterilerini ve finansını tek yerde yönet.
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="lead"
|
||||
className="mt-6 max-w-xl text-primary-foreground/78"
|
||||
>
|
||||
Cognis, günlük operasyonunu, projelerini, side projectlerini ve
|
||||
temel finans durumunu sade raporlarla takip etmen için
|
||||
tasarlanır.
|
||||
</Typography>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0, y: 18 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: reducedMotion ? 0 : 0.55, delay: 0.16 }}
|
||||
className="mt-10 grid max-w-xl grid-cols-2 gap-3"
|
||||
>
|
||||
{highlights.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<div
|
||||
key={item.label}
|
||||
className="flex items-center gap-3 rounded-sm border border-white/18 bg-white/10 px-4 py-3 text-sm font-medium backdrop-blur"
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{item.label}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="w-full relative z-10 p-10 text-sm text-primary-foreground/78">
|
||||
<span>Açık kaynak ve self-host edilebilir.</span>{" "}
|
||||
<Link
|
||||
href="https://github.com/poyrazavsever/cognis"
|
||||
className="font-semibold text-primary-foreground underline-offset-4 hover:underline"
|
||||
target="_blank"
|
||||
>
|
||||
GitHub <ArrowUpRight className="h-3.5 w-3.5 inline" />
|
||||
</Link>
|
||||
<span> üzerinden ulaşabilirsin, </span>
|
||||
<Link
|
||||
href="https://ui.poyrazavsever.com"
|
||||
className="font-semibold text-primary-foreground underline-offset-4 hover:underline"
|
||||
target="_blank"
|
||||
>
|
||||
Poyraz UI <ArrowUpRight className="h-3.5 w-3.5 inline" />
|
||||
</Link>
|
||||
<span> ile tasarlandı, </span>
|
||||
<Link
|
||||
href="https://poyrazavsever.com"
|
||||
className="inline-flex items-center gap-1 font-semibold text-primary-foreground underline-offset-4 hover:underline"
|
||||
target="_blank"
|
||||
>
|
||||
Poyraz Avsever <ArrowUpRight className="h-3.5 w-3.5 inline" />
|
||||
</Link>
|
||||
<span> tarafından kodlandı.</span>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
<section className="flex min-h-screen items-center justify-center px-6 py-8 lg:px-12">
|
||||
<motion.div
|
||||
initial={reducedMotion ? false : { opacity: 0, y: 18 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: reducedMotion ? 0 : 0.6, delay: 0.08 }}
|
||||
className="w-full max-w-sm"
|
||||
>
|
||||
<div className="mb-8 flex justify-center lg:hidden">
|
||||
<Image
|
||||
src="/logo/LogoWithBg.png"
|
||||
alt="Cognis logo"
|
||||
width={84}
|
||||
height={84}
|
||||
className="h-20 w-20 rounded-sm object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="hidden space-y-2 text-center lg:block lg:text-left">
|
||||
<Typography variant="h2" className="text-3xl">
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography variant="muted">{description}</Typography>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 space-y-6">
|
||||
{form}
|
||||
{secondaryAction}
|
||||
{footer}
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,23 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { signOut } from "@/app/login/actions";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Button } from "poyraz-ui/atoms";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
Sidebar,
|
||||
SidebarBranding,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuItem,
|
||||
SidebarSection,
|
||||
SidebarSeparator,
|
||||
SidebarTrigger,
|
||||
SidebarUserProfile,
|
||||
} from "poyraz-ui/organisms";
|
||||
import { sidebarData } from "@/config/sidebar";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { ChevronDown, LogOut, Menu, Settings2, Clock } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { LogOut, Menu } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState } from "react";
|
||||
|
||||
type DashboardShellProps = {
|
||||
children: React.ReactNode;
|
||||
@@ -32,312 +35,137 @@ type DashboardShellProps = {
|
||||
export function DashboardShell({ children, user }: DashboardShellProps) {
|
||||
const pathname = usePathname();
|
||||
const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
|
||||
const [isClockFullScreen, setIsClockFullScreen] = useState(false);
|
||||
|
||||
const closeMobileSidebar = () => setIsMobileSidebarOpen(false);
|
||||
|
||||
return (
|
||||
<div className="relative h-screen overflow-hidden bg-background text-foreground">
|
||||
<AmbientBackdrop />
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<div className="flex min-h-screen">
|
||||
<aside className="hidden w-[280px] shrink-0 border-r border-border bg-background lg:block">
|
||||
<AppSidebar pathname={pathname} user={user} />
|
||||
</aside>
|
||||
|
||||
{/* Full Screen Clock Overlay */}
|
||||
<AnimatePresence>
|
||||
{isClockFullScreen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className="fixed inset-0 z-[100] bg-[#0A0710] flex flex-col items-center justify-center cursor-pointer"
|
||||
onClick={() => setIsClockFullScreen(false)}
|
||||
>
|
||||
<div className="absolute top-8 right-8 text-muted-foreground text-sm tracking-widest uppercase">
|
||||
Click anywhere to close
|
||||
</div>
|
||||
<FullScreenClock />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<div className="relative z-10 flex h-screen">
|
||||
{/* Desktop Sidebar */}
|
||||
<div className="hidden shrink-0 lg:block lg:w-[260px] h-screen border-r border-white/5 bg-[#0A0710]">
|
||||
<SidebarPanel pathname={pathname} user={user} desktop onClockClick={() => setIsClockFullScreen(true)} />
|
||||
</div>
|
||||
|
||||
{/* Mobile Sidebar */}
|
||||
<AnimatePresence>
|
||||
{isMobileSidebarOpen ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-50 flex lg:hidden"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Menüyü kapat"
|
||||
className="absolute inset-0 bg-background/75 backdrop-blur-sm"
|
||||
onClick={closeMobileSidebar}
|
||||
{isMobileSidebarOpen ? (
|
||||
<div className="fixed inset-0 z-50 lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Menuyu kapat"
|
||||
className="absolute inset-0 bg-overlay"
|
||||
onClick={() => setIsMobileSidebarOpen(false)}
|
||||
/>
|
||||
<aside className="relative h-full w-[min(88vw,300px)] border-r border-border bg-background">
|
||||
<AppSidebar
|
||||
pathname={pathname}
|
||||
user={user}
|
||||
onNavigate={() => setIsMobileSidebarOpen(false)}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ x: -48, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
exit={{ x: -48, opacity: 0 }}
|
||||
transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="relative z-10 h-full w-[min(88vw,280px)] bg-[#0A0710]"
|
||||
>
|
||||
<SidebarPanel
|
||||
pathname={pathname}
|
||||
user={user}
|
||||
onNavigate={closeMobileSidebar}
|
||||
onClockClick={() => setIsClockFullScreen(true)}
|
||||
/>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
</aside>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Main Content Area (Scrollable internally) */}
|
||||
<div className="flex h-screen min-w-0 flex-1 flex-col overflow-y-auto tiny-scrollbar relative">
|
||||
{/* Mobile Menu Button */}
|
||||
<div className="lg:hidden p-4 flex items-center justify-between z-30 sticky top-0 bg-background/50 backdrop-blur-md">
|
||||
<div className="flex items-center gap-2">
|
||||
<Image src="/logo/logo.png" alt="Cognis Logo" width={24} height={24} className="object-contain" />
|
||||
<span className="font-semibold text-sm">Cognis</span>
|
||||
</div>
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-background/95 px-4 backdrop-blur lg:hidden">
|
||||
<Link href="/" className="flex items-center gap-2 font-semibold">
|
||||
<span className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-xs text-primary-foreground">
|
||||
C
|
||||
</span>
|
||||
Cognis
|
||||
</Link>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="rounded-lg border-border bg-white/5 h-8 w-8"
|
||||
className="h-9 w-9 p-0"
|
||||
onClick={() => setIsMobileSidebarOpen(true)}
|
||||
>
|
||||
<Menu className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 p-6 lg:p-10">
|
||||
{children}
|
||||
</main>
|
||||
<main className="flex-1 p-4 lg:p-8">{children}</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarPanel({
|
||||
function AppSidebar({
|
||||
pathname,
|
||||
user,
|
||||
desktop = false,
|
||||
onNavigate,
|
||||
onClockClick,
|
||||
}: {
|
||||
pathname: string;
|
||||
user: DashboardShellProps["user"];
|
||||
desktop?: boolean;
|
||||
onNavigate?: () => void;
|
||||
onClockClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<aside className="flex h-full flex-col overflow-hidden">
|
||||
{/* Header / Time Badge */}
|
||||
<div className="pt-8 pb-2 px-4 flex justify-start">
|
||||
<ClockBadge onClick={onClockClick} />
|
||||
</div>
|
||||
<Sidebar variant="bordered" className="h-full rounded-none border-0">
|
||||
<SidebarHeader>
|
||||
<SidebarBranding
|
||||
title="Cognis"
|
||||
subtitle="Freelancer OS"
|
||||
logo={
|
||||
<span className="flex h-9 w-9 items-center justify-center rounded-sm bg-primary text-sm font-bold text-primary-foreground">
|
||||
C
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
</SidebarHeader>
|
||||
|
||||
{/* Main Navigation Links */}
|
||||
<nav className="flex-1 space-y-4 px-3 overflow-y-auto tiny-scrollbar mt-4 pb-4">
|
||||
{sidebarData.map((group, groupIdx) => (
|
||||
<div key={groupIdx} className="space-y-1">
|
||||
<h4 className="px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60 mb-2">
|
||||
{group.title}
|
||||
</h4>
|
||||
<div className="space-y-1">
|
||||
{group.items.map((route) => {
|
||||
<SidebarContent className="tiny-scrollbar">
|
||||
{sidebarData.map((group) => (
|
||||
<SidebarSection key={group.title} title={group.title} defaultOpen>
|
||||
<SidebarMenu>
|
||||
{group.items.map((item) => {
|
||||
const isActive =
|
||||
route.href === "/"
|
||||
item.href === "/"
|
||||
? pathname === "/"
|
||||
: route.href
|
||||
? pathname === route.href ||
|
||||
pathname.startsWith(route.href + "/")
|
||||
: item.href
|
||||
? pathname === item.href || pathname.startsWith(item.href + "/")
|
||||
: false;
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={route.href || route.title}
|
||||
href={route.href || "#"}
|
||||
className="block w-full"
|
||||
onClick={onNavigate}
|
||||
<SidebarMenuItem
|
||||
key={item.href || item.title}
|
||||
active={isActive}
|
||||
icon={Icon ? <Icon className="h-4 w-4" /> : undefined}
|
||||
className={cn(isActive && "font-semibold")}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-all duration-300 w-full",
|
||||
isActive
|
||||
? "bg-primary/20 border border-primary/30 shadow-[0_0_15px_rgba(108,91,176,0.15)] text-foreground font-medium"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-white/5 border border-transparent",
|
||||
)}
|
||||
<Link
|
||||
href={item.href || "#"}
|
||||
onClick={onNavigate}
|
||||
className="block w-full"
|
||||
>
|
||||
{route.icon && (
|
||||
<route.icon
|
||||
className={cn(
|
||||
"h-[18px] w-[18px] shrink-0 transition-colors",
|
||||
isActive
|
||||
? "text-primary-foreground"
|
||||
: "text-muted-foreground/70",
|
||||
)}
|
||||
strokeWidth={isActive ? 2.5 : 2}
|
||||
/>
|
||||
)}
|
||||
<span className="text-[14px]">{route.title}</span>
|
||||
</div>
|
||||
</Link>
|
||||
{item.title}
|
||||
</Link>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</SidebarMenu>
|
||||
</SidebarSection>
|
||||
))}
|
||||
</nav>
|
||||
</SidebarContent>
|
||||
|
||||
{/* Bottom User Profile & Settings Section */}
|
||||
<div className="mt-auto p-3">
|
||||
<div className="mb-2">
|
||||
<Link
|
||||
href="/settings"
|
||||
onClick={onNavigate}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-lg px-3 py-2.5 transition-all duration-300 w-full",
|
||||
pathname.startsWith("/settings")
|
||||
? "bg-primary/20 border border-primary/30 shadow-[0_0_15px_rgba(108,91,176,0.15)] text-foreground font-medium"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-white/5 border border-transparent",
|
||||
)}
|
||||
>
|
||||
<Settings2
|
||||
className="h-[18px] w-[18px] shrink-0"
|
||||
strokeWidth={pathname.startsWith("/settings") ? 2.5 : 2}
|
||||
/>
|
||||
<span className="text-[14px]">Ayarlar</span>
|
||||
</Link>
|
||||
</div>
|
||||
<SidebarSeparator />
|
||||
|
||||
{/* Separator */}
|
||||
<div className="h-[1px] w-full bg-white/5 mb-3" />
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between gap-2 rounded-md p-2 transition-all hover:bg-white/5 outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<Avatar user={user} />
|
||||
<div className="min-w-0 text-left">
|
||||
<div className="truncate text-sm font-medium text-foreground leading-tight">
|
||||
{user.displayName}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<DropdownMenuContent
|
||||
side="right"
|
||||
align="end"
|
||||
sideOffset={16}
|
||||
className="w-56 rounded-lg border border-white/10 bg-[#0A0710] p-1 text-foreground shadow-2xl"
|
||||
>
|
||||
<DropdownMenuLabel className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
||||
{user.email}
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator className="bg-white/5" />
|
||||
<DropdownMenuItem
|
||||
className="rounded-md px-2 py-1.5 text-destructive focus:bg-destructive/10 focus:text-destructive cursor-pointer flex items-center gap-2 text-sm"
|
||||
onClick={async () => {
|
||||
await signOut();
|
||||
}}
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Çıkış Yap
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function ClockBadge({ onClick }: { onClick: () => void }) {
|
||||
const [time, setTime] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
const updateTime = () => {
|
||||
setTime(new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }));
|
||||
};
|
||||
updateTime();
|
||||
const interval = setInterval(updateTime, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
if (!time) {
|
||||
return <div className="h-[34px] w-[100px] bg-white/5 animate-pulse rounded-sm" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="border border-white/5 bg-[#150F1D] px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground hover:text-foreground hover:border-primary/50 transition-colors rounded-sm flex items-center gap-2 group outline-none"
|
||||
>
|
||||
<Clock className="h-3.5 w-3.5 text-primary/70 group-hover:text-primary transition-colors" />
|
||||
<span suppressHydrationWarning>{time}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function FullScreenClock() {
|
||||
const [time, setTime] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
const updateTime = () => {
|
||||
setTime(new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' }));
|
||||
};
|
||||
updateTime();
|
||||
const interval = setInterval(updateTime, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="text-[12vw] font-black tracking-tighter text-primary/90 drop-shadow-[0_0_60px_rgba(108,91,176,0.3)] select-none tabular-nums">
|
||||
<span suppressHydrationWarning>{time || "..."}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Avatar({ user }: { user: DashboardShellProps["user"] }) {
|
||||
if (user.avatarUrl) {
|
||||
return (
|
||||
<div className="h-10 w-10 shrink-0 overflow-hidden rounded-full border border-primary/20 bg-primary/10">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={user.avatarUrl}
|
||||
alt={user.displayName}
|
||||
className="h-full w-full object-cover"
|
||||
<SidebarFooter className="space-y-3">
|
||||
<SidebarUserProfile
|
||||
name={user.displayName}
|
||||
role={user.email}
|
||||
avatarUrl={user.avatarUrl || undefined}
|
||||
initials={user.shortName}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<form action={signOut}>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="outline"
|
||||
className="h-10 w-full justify-start gap-2"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
Cikis yap
|
||||
</Button>
|
||||
</form>
|
||||
</SidebarFooter>
|
||||
|
||||
return (
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-primary/30 bg-primary/20 font-semibold text-primary-foreground text-sm">
|
||||
{user.shortName}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AmbientBackdrop() {
|
||||
return (
|
||||
<>
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(108,91,176,0.1),transparent_30%),radial-gradient(circle_at_bottom_left,rgba(108,91,176,0.1),transparent_30%)]" />
|
||||
</>
|
||||
<SidebarTrigger className="hidden" />
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
Vendored
+1
-1
@@ -1,6 +1,6 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
import "./.next/dev/types/routes.d.ts";
|
||||
import "./.next/types/routes.d.ts";
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
|
||||
Generated
+969
-612
File diff suppressed because it is too large
Load Diff
+3
-1
@@ -22,6 +22,7 @@
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@radix-ui/react-toast": "^1.2.15",
|
||||
"@supabase/ssr": "^0.10.2",
|
||||
"@tailwindcss/postcss": "^4.3.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dexie": "^4.4.2",
|
||||
@@ -30,6 +31,7 @@
|
||||
"lucide-react": "^1.14.0",
|
||||
"next": "^16.2.6",
|
||||
"next-themes": "^0.4.6",
|
||||
"poyraz-ui": "^2.0.1",
|
||||
"radix-ui": "^1.4.3",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
@@ -51,7 +53,7 @@
|
||||
"eslint": "^9.18.0",
|
||||
"eslint-config-next": "^16.2.6",
|
||||
"postcss": "^8.5.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss": "^4.3.0",
|
||||
"typescript": "^5.7.3"
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
"@tailwindcss/postcss": {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@ import type { Config } from "tailwindcss";
|
||||
import tailwindcssAnimate from "tailwindcss-animate";
|
||||
|
||||
const config: Config = {
|
||||
darkMode: ["class"],
|
||||
darkMode: "class",
|
||||
content: [
|
||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
|
||||
Reference in New Issue
Block a user