Feat copyofmytodo

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# clerk configuration (can include secrets)
+/.clerk/

@types/react-syntax-highlighter.d.ts

@@ -0,0 +1,4 @@
+// types/react-syntax-highlighter.d.ts
+declare module 'react-syntax-highlighter';
+declare module 'react-syntax-highlighter/dist/esm/styles/hljs';
+declare module 'react-syntax-highlighter/dist/esm/styles/prism';

app/components/ConfirmModal.tsx

@@ -0,0 +1,42 @@
+// components/ConfirmModal.tsx
+import React from 'react';
+import { Dialog } from '@headlessui/react';
+
+type Props = {
+ isOpen: boolean;
+ onClose: () => void;
+ onConfirm: () => void;
+ title?: string;
+ message?: string;
+};
+
+const ConfirmModal = ({ isOpen, onClose, onConfirm, title, message }: Props) => (
+ <Dialog open={isOpen} onClose={onClose} className="fixed z-50 inset-0 flex items-center justify-center">
+ <div className="fixed inset-0 bg-black opacity-30" aria-hidden="true" />
+ <div className="relative bg-white p-6 rounded-xl shadow-xl w-full max-w-sm z-50">
+ <Dialog.Title className="text-lg font-bold mb-2">{title || 'Confirm'}</Dialog.Title>
+ <Dialog.Description className="text-sm text-gray-700 mb-4">
+ {message || 'Are you sure you want to proceed?'}
+ </Dialog.Description>
+ <div className="flex justify-end gap-3">
+ <button
+ onClick={onClose}
+ className="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 text-sm"
+ >
+ Cancel
+ </button>
+ <button
+ onClick={() => {
+ onConfirm();
+ onClose();
+ }}
+ className="px-4 py-2 rounded bg-red-600 text-white hover:bg-red-700 text-sm"
+ >
+ Delete
+ </button>
+ </div>
+ </div>
+ </Dialog>
+);
+
+export default ConfirmModal;

app/components/atoms/Button.tsx

@@ -0,0 +1,43 @@
+// components/Button.tsx
+import React from "react";
+import { buttonClasses } from "@/lib/utils";
+import { Loader2 } from "lucide-react"; // For loading spinner
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+ variant?: "default" | "outline" | "ghost" | "danger" | "icon";
+ size?: "sm" | "md" | "lg";
+ isLoading?: boolean;
+ startIcon?: React.ReactNode;
+ endIcon?: React.ReactNode;
+};
+
+export const Button: React.FC<ButtonProps> = ({
+ children,
+ className,
+ variant = "default",
+ size = "md",
+ isLoading = false,
+ startIcon,
+ endIcon,
+ disabled,
+ ...props
+}) => {
+ return (
+ <button 
+ className={buttonClasses(className, variant, size)}
+ disabled={isLoading || disabled}
+ {...props}
+ >
+ {isLoading && (
+ <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+ )}
+ {!isLoading && startIcon && (
+ <span className="mr-2">{startIcon}</span>
+ )}
+ {children}
+ {!isLoading && endIcon && (
+ <span className="ml-2">{endIcon}</span>
+ )}
+ </button>
+ );
+};

app/components/code-switcher.tsx

@@ -1,36 +1,23 @@
 "use client";
 
-import { useOrganization, useSession, useUser } from "@clerk/nextjs";
-import clsx from "clsx";
-import { useState } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import theme from "./theme";
+import { useState } from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import clsx from 'clsx';
 
-const TYPES = ["user", "session", "organization"];
-
-export function CodeSwitcher() {
- const [selectedType, setSelectedType] = useState(TYPES[0]);
- const { user } = useUser();
- const { session } = useSession();
- const { organization } = useOrganization();
-
- const selectedCode = JSON.stringify(
- {
- user,
- session,
- organization,
- }[selectedType],
- null,
- 2
- );
+interface CodeSwitcherProps {
+ typesToShow: string[];
+ codeMap: Record<string, string>;
+ theme?: any; // Replace with proper theme type from react-syntax-highlighter
+}
 
- const typesToShow = organization
-  ? TYPES
-  : TYPES.filter((type) => type !== "organization");
+export function CodeSwitcher({ typesToShow, codeMap, theme = docco }: CodeSwitcherProps) {
+ const [selectedType, setSelectedType] = useState(typesToShow[0]);
+ const selectedCode = codeMap[selectedType];
 
  return (
- <div className={clsx(organization ? "h-[54.625rem]" : "h-[41.625rem]")}>
- <div className="w-full bg-[#F7F7F8] rounded-md p-[0.1875rem] flex gap-1.5">
+ <div className="rounded-lg border border-[#EEEEF0] bg-[#FAFAFA] p-4">
+ <div className="mb-4 flex gap-2 rounded bg-[#EEEEF0] p-1">
  {typesToShow.map((type) => (
  <button
  className={clsx(
@@ -48,7 +35,6 @@ export function CodeSwitcher() {
  </div>
  <div className="relative h-[calc(100%-42px)]">
  <div className="mask h-full">
- {/* @ts-expect-error */}
  <SyntaxHighlighter language="javascript" style={theme}>
  {selectedCode}
  </SyntaxHighlighter>

app/components/components/FileInput.tsx

@@ -0,0 +1,29 @@
+// components/FileInput.tsx
+import React from "react";
+
+type FileInputProps = {
+ onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+ accept?: string;
+ multiple?: boolean;
+ inputRef?: React.RefObject<HTMLInputElement>;
+ className?: string;
+};
+
+export const FileInput: React.FC<FileInputProps> = ({
+ onChange,
+ accept = "image/*",
+ multiple = true,
+ inputRef,
+ className = "hidden",
+}) => {
+ return (
+ <input
+ type="file"
+ ref={inputRef}
+ className={className}
+ accept={accept}
+ multiple={multiple}
+ onChange={onChange}
+ />
+ );
+};

app/components/header.tsx

@@ -0,0 +1,34 @@
+// components/header.tsx
+"use client";
+import { Menu } from "lucide-react";
+
+interface HeaderProps {
+ onMenuClick: () => void;
+}
+
+export default function Header({ onMenuClick }: HeaderProps) {
+ return (
+ <header className="fixed top-0 left-0 right-0 h-16 bg-neutral-900 border-b border-neutral-800 flex items-center justify-between px-4 z-10">
+ {/* Left: Menu + Title */}
+ <div className="flex items-center space-x-4">
+ <button
+ onClick={onMenuClick}
+ className="text-white bg-neutral-800 p-2 rounded hover:bg-neutral-700 transition"
+ >
+ <Menu size={20} />
+ </button>
+ <h1 className="text-3xl font-bold text-[#4f46e5]">Notes</h1>
+ </div>
+ {/* Center: Search Bar */}
+ <div className="flex-grow flex justify-center">
+ <input
+ type="text"
+ placeholder="Search"
+ className="border border-neutral-700 px-4 py-2 rounded-lg w-full max-w-2xl bg-neutral-900 text-white focus:outline-none focus:ring-1 focus:ring-orange-500"
+ />
+ </div>
+ {/* Optional Right Section (for future buttons) */}
+ <div className="w-12" /> {/* Placeholder for alignment */}
+ </header>
+ );
+}

app/components/hooks/TaskForm.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useRef } from 'react';
+import * as yup from 'yup';
+import { useTasks } from "../hooks/useTasks";
+import { Note } from '../types';
+
+
+interface Task {
+ id: string;
+ text: string;
+ completed: boolean;
+}
+
+interface FormValues {
+ title: string;
+ content: string;
+ tasks: Task[];
+ isChecklist: boolean;
+ images: string[];
+}
+
+interface NoteInputProps {
+ onSave: (note: Partial<Note>) => Promise<void>; // Changed to Partial
+}
+
+const noteSchema = yup.object().shape({
+ title: yup.string().trim().required('Title is required'),
+ content: yup.string().required('Note content is required'),
+ tasks: yup.array().of(
+ yup.object().shape({
+ id: yup.string().required(),
+ text: yup.string().required('Task text is required'),
+ completed: yup.boolean().required()
+ })
+ ),
+ isChecklist: yup.boolean(),
+ images: yup.array().of(yup.string())
+});
+
+export const TaskForm: React.FC<NoteInputProps> = ({ onSave }) => {
+ const [formValues, setFormValues] = useState<FormValues>({
+ title: '',
+ content: '',
+ tasks: [],
+ isChecklist: false,
+ images: []
+ });
+ const [errors, setErrors] = useState<Record<string, string>>({});
+ const { taskInputRefs, handleTaskTextChange, handleTaskKeyDown } = useTasks();
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ try {
+ await noteSchema.validate(formValues, { abortEarly: false });
+ await onSave(formValues);
+ setFormValues({
+ title: '',
+ content: '',
+ tasks: [],
+ isChecklist: false,
+ images: []
+ });
+ } catch (err) {
+ if (err instanceof yup.ValidationError) {
+ const validationErrors: Record<string, string> = {};
+ err.inner.forEach((error) => {
+ if (error.path) {
+ validationErrors[error.path] = error.message;
+ }
+ });
+ setErrors(validationErrors);
+ }
+ }
+ };
+
+ return (
+ <form onSubmit={handleSubmit} className="space-y-4">
+ <input
+ type="text"
+ value={formValues.title}
+ onChange={(e) => setFormValues({ ...formValues, title: e.target.value })}
+ placeholder="Title"
+ className="w-full p-2 border rounded"
+ />
+ {errors.title && <span className="text-red-500">{errors.title}</span>}
+
+ <textarea
+ value={formValues.content}
+ onChange={(e) => setFormValues({ ...formValues, content: e.target.value })}
+ placeholder="Content"
+ className="w-full p-2 border rounded"
+ />
+ {errors.content && <span className="text-red-500">{errors.content}</span>}
+
+ <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded">
+ Save
+ </button>
+ </form>
+ );
+};