Tasky AI

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "singleAttributePerLine": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "bracketSameLine": true,
        "singleAttributePerLine": false
      }
    }
  ]
}

constant.tsx

/**
 * @copyright 2024 codewithsadee
 * @license Apache-2.0
 * @description Constants for the app
 */

/**
 * Node modules
 */
import { Calendar1, CircleCheck, CalendarDays, Inbox } from 'lucide-react';

export const SOCIAL_LINKS = [
  {
    href: 'https://youtube.com/codewithsadee',
    label: 'YouTube',
  },
  {
    href: 'https://linkedin.com/in/codewithsadee',
    label: 'LinkedIn',
  },
  {
    href: 'https://github.com/codewithsadee',
    label: 'GitHub',
  },
  {
    href: 'https://instagram.com/codewithsadee',
    label: 'Instagram',
  },
] as const;

export const SIDEBAR_LINKS = [
  {
    href: '/app/inbox',
    label: 'Inbox',
    icon: Inbox,
  },
  {
    href: '/app/today',
    label: 'Today',
    icon: Calendar1,
  },
  {
    href: '/app/upcoming',
    label: 'Upcoming',
    icon: CalendarDays,
  },
  {
    href: '/app/completed',
    label: 'Completed',
    icon: CircleCheck,
  },
] as const;

export const PROJECT_COLORS = [
  {
    name: 'Slate',
    hex: '#64748b',
  },
  {
    name: 'Red',
    hex: '#ef4444',
  },
  {
    name: 'Orange',
    hex: '#f97316',
  },
  {
    name: 'Amber',
    hex: '#f59e0b',
  },
  {
    name: 'Yellow',
    hex: '#eab308',
  },
  {
    name: 'Lime',
    hex: '#84cc16',
  },
  {
    name: 'Green',
    hex: '#22c55e',
  },
  {
    name: 'Emerald',
    hex: '#10b981',
  },
  {
    name: 'Teal',
    hex: '#06b6d4',
  },
  {
    name: 'Cyan',
    hex: '#06b6d4',
  },
  {
    name: 'Sky',
    hex: '#0ea5e9',
  },
  {
    name: 'Blue',
    hex: '#06b6d4',
  },
  {
    name: 'Indigo',
    hex: '#6366f1',
  },
  {
    name: 'Violet',
    hex: '#8b5cf6',
  },
  {
    name: 'Purple',
    hex: '#a855f7',
  },
  {
    name: 'Fuchsia',
    hex: '#d946ef',
  },
  {
    name: 'Pink',
    hex: '#ec4899',
  },
  {
    name: 'Rose',
    hex: '#f43f5e',
  },
] as const;

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --radius: 0.5rem;
  }

  .dark {
    --background: 20 14.3% 4.1%;
    --foreground: 60 9.1% 97.8%;
    --card: 20 14.3% 4.1%;
    --card-foreground: 60 9.1% 97.8%;
    --popover: 20 14.3% 4.1%;
    --popover-foreground: 60 9.1% 97.8%;
    --primary: 20.5 90.2% 48.2%;
    --primary-foreground: 60 9.1% 97.8%;
    --secondary: 12 6.5% 15.1%;
    --secondary-foreground: 60 9.1% 97.8%;
    --muted: 12 6.5% 15.1%;
    --muted-foreground: 24 5.4% 63.9%;
    --accent: 12 6.5% 15.1%;
    --accent-foreground: 60 9.1% 97.8%;
    --destructive: 0 72.2% 60.6%;
    --destructive-foreground: 60 9.1% 97.8%;
    --border: 12 6.5% 15.1%;
    --input: 12 6.5% 15.1%;
    --ring: 20.5 90.2% 48.2%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 20 14.3% 6.1%;
    --sidebar-foreground: 60 9.1% 97.8%;
    --sidebar-primary: 20.5 90.2% 48.2%;
    --sidebar-primary-foreground: 60 9.1% 97.8%;
    --sidebar-accent: 12 6.5% 15.1%;
    --sidebar-accent-foreground: 60 9.1% 97.8%;
    --sidebar-border: 12 6.5% 15.1%;
    --sidebar-ring: 20.5 90.2% 48.2%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;

    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--secondary) var(--background); /* Firefox */
  }

  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-secondary rounded-sm;
  }
}

@layer utilities {
  .container {
    @apply mx-auto px-4;
  }
}

main.tsx

variables: {
  colorBackground: 'hsl(20 14.3% 4.1%)',
  colorText: 'hsl(60 9.1% 97.8%)',
  colorDanger: 'hsl(0 72.2% 50.6%)',
  colorTextSecondary: 'hsl(24 5.4% 63.9%)',
  colorInputBackground: 'hsl(20 14.3% 4.1%)',
  colorInputText: 'hsl(60 9.1% 97.8%)',
  borderRadius: '0.35rem',
  colorPrimary: 'hsl(20.5 90.2% 48.2%)',
  colorTextOnPrimaryBackground: 'hsl(60 9.1% 97.8%)',
}

ProjectForm.tsx

const DEFAULT_PROJECT_NAME = 'Untitled';
const DEFAULT_PROJECT_COLOR_NAME = 'Slate';
const DEFAULT_PROJECT_COLOR_HEX = '#64748b';

const DEFAULT_FORM_DATA: Project = {
  id: null,
  name: DEFAULT_PROJECT_NAME,
  color_name: DEFAULT_PROJECT_COLOR_NAME,
  color_hex: DEFAULT_PROJECT_COLOR_HEX,
};

TaskEmptyState.tsx

const emptyStates = {
  today: {
    img: {
      src: todayTaskEmptyState,
      width: 226,
      height: 260,
    },
    title: 'What do you need to get done today?',
    description:
      'By default, tasks added here will be due today. Click + to add a task.',
  },
  inbox: {
    img: {
      src: inboxTaskEmptyState,
      width: 344,
      height: 260,
    },
    title: 'What’s on your mind?',
    description:
      'Capture tasks that don’t have a specific category. Click + to add a task.',
  },
  upcoming: {
    img: {
      src: upcomingTaskEmptyState,
      width: 208,
      height: 260,
    },
    title: 'Plan ahead with ease!',
    description:
      'Tasks added here will be due in the future. Click + to schedule a task.',
  },
  completed: {
    img: {
      src: completedTaskEmptyState,
      width: 231,
      height: 260,
    },
    title: 'You’ve been productive!',
    description:
      'All the tasks you’ve completed will appear here. Keep up the great work!',
  },
  project: {
    img: {
      src: projectTaskEmptyState,
      width: 228,
      height: 260,
    },
    title: 'Let’s build something amazing!',
    description:
      'Add tasks specific to this project. Click + to start planning.',
  },
};

type.ts

/**
 * @copyright 2024 codewithsadee
 * @license Apache-2.0
 * @description Types for the app
 */

type Project = {
  id: string | null;
  name: string;
  color_name: string;
  color_hex: string;
}

type ProjectForm = {
  id: string | null;
  name: string;
  color_name: string;
  color_hex: string;
  ai_task_gen: boolean;
  task_gen_prompt: string;
};

type Task = {
  id?: string;
  content: string;
  due_date: Date | null;
  completed?: boolean;
  project: Project | null;
  userId: string;
}

type TaskForm = {
  id?: string;
  content: string;
  due_date: Date | null;
  completed?: boolean;
  project: string | null;
}

export type { Project, ProjectForm, Task, TaskForm }

vercel.json

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}