4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:Tfd2,"use client"; import { useState } from "react"; import { Card } from "@/components/ui/card"; import { Sheet, SheetContent } from "@/components/ui/sheet"; import { Button } from "@/components/ui/button"; import { Menu } from "lucide-react"; import NotesSidebar from "@/components/shadcn-dashboard/blocks/application-shell/application-shell-02/notes-sidebar"; import NoteContent from "@/components/shadcn-dashboard/blocks/application-shell/application-shell-02/note-content"; import AddNotes from "@/components/shadcn-dashboard/blocks/application-shell/application-shell-02/add-notes"; import { notesData as initialNotesData } from "@/components/shadcn-dashboard/blocks/application-shell/application-shell-02/data"; import { Note, colorOptions } from "@/components/shadcn-dashboard/blocks/application-shell/application-shell-02/types"; const ApplicationShell02 = () => { const [isOpen, setIsOpen] = useState(false); const [notes, setNotes] = useState(initialNotesData); const [selectedNoteId, setSelectedNoteId] = useState( initialNotesData[0]?.id ?? null ); const selectedNote = notes.find((note) => note.id === selectedNoteId) ?? null; const handleSelectNote = (id: number) => { setSelectedNoteId(id); setIsOpen(false); }; const handleAddNote = (title: string, color: Note["color"]) => { const newNote: Note = { id: notes.length ? Math.max(...notes.map((note) => note.id)) + 1 : 1, title, color, datef: new Date().toISOString(), }; setNotes((prev) => [newNote, ...prev]); setSelectedNoteId(newNote.id); }; const handleUpdateNote = (id: number | null, title: string, color: Note["color"]) => { if (id === null) return; setNotes((prev) => prev.map((note) => (note.id === id ? { ...note, title, color } : note)) ); }; const handleDeleteNote = (id: number) => { setNotes((prev) => { const remaining = prev.filter((note) => note.id !== id); if (selectedNoteId === id) { setSelectedNoteId(remaining[0]?.id ?? null); } return remaining; }); }; return (

{/* NOTES SIDEBAR */}

{/* NOTES CONTENT */}

Edit Note

); }; export default ApplicationShell02; 53:Tfaf,"use client"; import { useState } from "react"; import { Trash2, SearchIcon } from "lucide-react"; import { Alert, AlertTitle } from "@/components/ui/alert"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider, } from "@/components/ui/tooltip"; import SimpleBar from "simplebar-react"; import "simplebar-react/dist/simplebar.min.css"; import { Note, NoteColor } from "@/components/shadcn-dashboard/blocks/application-shell/application-shell-02/types"; import { Card } from "@/components/ui/card"; type Props = { notes: Note[]; selectedNoteId: number | null; onSelectNote: (id: number) => void; onDeleteNote: (id: number) => void; }; const colorClasses: Record = { primary: "bg-primary/5 text-primary border border-primary/20", destructive: "bg-destructive/5 text-primary border border-destructive/20", "chart-3": "bg-chart-3/5 text-primary border border-chart-3/20", "chart-4": "bg-chart-4/5 text-primary border border-chart-4/20", "chart-2": "bg-chart-2/5 text-primary border border-chart-2/20", }; const Notelist = ({ notes, selectedNoteId, onSelectNote, onDeleteNote }: Props) => { const [searchTerm, setSearchTerm] = useState(""); const filteredNotes = notes.filter((note) => note.title.toLowerCase().includes(searchTerm.toLowerCase()) ); return (

setSearchTerm(e.target.value)} placeholder="Search Notes..." />

All Notes

{filteredNotes.length ? ( filteredNotes.map((note) => ( onSelectNote(note.id)} >

{note.title}

{new Date(note.datef).toLocaleDateString()}

{ e.stopPropagation(); onDeleteNote(note.id); }} aria-label="Delete note" > } /> Delete

)) ) : ( No Notes Found! )}

); }; export default Notelist; 54:T7dd,"use client"; import { useEffect, useState } from "react"; import { Check } from "lucide-react"; import { Textarea } from "@/components/ui/textarea"; import { Note, NoteColor, colorOptions } from "@/components/shadcn-dashboard/blocks/application-shell/application-shell-02/types"; type Props = { note: Note | null; onUpdateNote: (id: number | null, title: string, color: NoteColor) => void; }; const NoteContent = ({ note, onUpdateNote }: Props) => { const [title, setTitle] = useState(""); useEffect(() => { setTitle(note?.title ?? ""); }, [note]); const handleBlur = () => { if (note) { onUpdateNote(note.id, title, note.color); } }; const handleColorChange = (color: NoteColor) => { if (note) { onUpdateNote(note.id, title, color); } }; return (

{note ? (

setTitle(e.target.value)}
            onBlur={handleBlur}
            className="w-full p-6"
          />
          <br />
          <h6 className="text-base mb-3">Change Note Color</h6>

<div className="flex gap-2 items-center">
            {colorOptions.map((color) => (
              <div
                key={color.id}
                className={`h-7 w-7 flex justify-center items-center rounded-full cursor-pointer bg-${color.disp}`}
                onClick={() => handleColorChange(color.disp)}
              >
                {note.color === color.disp ? (
                  <Check width={18} className="text-white" />
                ) : null}
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div className="text-center w-full py-6 text-2xl">Select a Note</div>
      )}
    </div>
  );
};

export default NoteContent;
55:T9b7,"use client";
import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Check } from "lucide-react";
import { ColorOption, NoteColor } from "@/components/shadcn-dashboard/blocks/application-shell/application-shell-02/types";

type Props = {
  colors: ColorOption[];
  onAddNote: (title: string, color: NoteColor) => void;
};

const AddNotes = ({ colors, onAddNote }: Props) => {
  const [openNoteModal, setOpenNoteModal] = useState(false);
  const [scolor, setScolor] = useState<NoteColor>("primary");
  const [title, setTitle] = useState("");

const handleSave = () => {
    onAddNote(title, scolor);
    setOpenNoteModal(false);
    setTitle("");
    setScolor("primary");
  };

return (
    <Dialog open={openNoteModal} onOpenChange={setOpenNoteModal}>
      <DialogTrigger render={<Button>Add Note</Button>} />
      <DialogContent className="sm:max-w-lg rtl:[&_[data-slot=dialog-close]]:left-2 rtl:[&_[data-slot=dialog-close]]:right-auto">
        <DialogHeader>
          <DialogTitle>Add New Note</DialogTitle>
        </DialogHeader>

<div className="space-y-2">
          <Textarea
            rows={5}
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="w-full"
            placeholder="Write your note here..."
          />
          <h6 className="text-base pt-4">Change Note Color</h6>
          <div className="flex gap-2 items-center">
            {colors.map((color) => (
              <div
                key={color.disp}
                onClick={() => setScolor(color.disp)}
                className={`h-7 w-7 flex justify-center items-center rounded-full cursor-pointer bg-${color.disp}`}
              >
                {scolor === color.disp && <Check size={18} className="text-white" />}
              </div>
            ))}
          </div>
        </div>

<DialogFooter className="pt-4">
          <Button disabled={!title} onClick={handleSave}>
            Save
          </Button>
          <Button variant="outline" onClick={() => setOpenNoteModal(false)}>
            Close
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default AddNotes;
56:T782,import { sub } from "date-fns";
import { Note } from "@/components/shadcn-dashboard/blocks/application-shell/application-shell-02/types";

export const notesData: Note[] = [
  {
    id: 1,
    color: "primary",
    title:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    datef: sub(new Date(), { days: 0 }).toISOString(),
  },
  {
    id: 2,
    color: "destructive",
    title:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
    datef: sub(new Date(), { days: 1 }).toISOString(),
  },
  {
    id: 3,
    color: "chart-4",
    title:
      "Consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.",
    datef: sub(new Date(), { days: 2 }).toISOString(),
  },
  {
    id: 4,
    color: "chart-3",
    title:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    datef: sub(new Date(), { days: 3 }).toISOString(),
  },
  {
    id: 5,
    color: "chart-2",
    title:
      "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    datef: sub(new Date(), { days: 4 }).toISOString(),
  },
];
4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","simplebar-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/simplebar-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"simplebar-react"}]]}]}],["$","li","date-fns",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"date-fns"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["card","sheet","button","input","textarea","dialog","alert","tooltip"]}]]}],["$","$L50",null,{"sourceUrl":"https://shadcndashboard.dev/r/application-shell-02.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-dashboard/application-shell-02","itemId":"@shadcn-dashboard/application-shell-02"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/components/shadcn-dashboard/blocks/application-shell/application-shell-02/page.tsx","content":"import ApplicationShell02 from \"@/components/shadcn-dashboard/blocks/application-shell/application-shell-02/index\";\r\n\r\nexport default function page() {\r\n  return <ApplicationShell02 />;\r\n}\r\n","type":"registry:page","target":"app/application-shell-02/page.tsx"},{"path":"src/components/shadcn-dashboard/blocks/application-shell/application-shell-02/index.tsx","content":"$52","type":"registry:component","target":"components/shadcn-dashboard/blocks/application-shell/application-shell-02/index.tsx"},{"path":"src/components/shadcn-dashboard/blocks/application-shell/application-shell-02/notes-sidebar.tsx","content":"import Notelist from \"@/components/shadcn-dashboard/blocks/application-shell/application-shell-02/notes-list\";\r\nimport { Note } from \"@/components/shadcn-dashboard/blocks/application-shell/application-shell-02/types\";\r\n\r\ntype Props = {\r\n  notes: Note[];\r\n  selectedNoteId: number | null;\r\n  onSelectNote: (id: number) => void;\r\n  onDeleteNote: (id: number) => void;\r\n};\r\n\r\nconst NotesSidebar = ({ notes, selectedNoteId, onSelectNote, onDeleteNote }: Props) => {\r\n  return (\r\n    <div className=\"w-80 border-e border-border p-6 h-full flex flex-col overflow-hidden\">\r\n      <Notelist\r\n        notes={notes}\r\n        selectedNoteId={selectedNoteId}\r\n        onSelectNote={onSelectNote}\r\n        onDeleteNote={onDeleteNote}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default NotesSidebar;\r\n","type":"registry:component","target":"components/shadcn-dashboard/blocks/application-shell/application-shell-02/notes-sidebar.tsx"},{"path":"src/components/shadcn-dashboard/blocks/application-shell/application-shell-02/notes-list.tsx","content":"$53","type":"registry:component","target":"components/shadcn-dashboard/blocks/application-shell/application-shell-02/notes-list.tsx"},{"path":"src/components/shadcn-dashboard/blocks/application-shell/application-shell-02/note-content.tsx","content":"$54","type":"registry:component","target":"components/shadcn-dashboard/blocks/application-shell/application-shell-02/note-content.tsx"},{"path":"src/components/shadcn-dashboard/blocks/application-shell/application-shell-02/add-notes.tsx","content":"$55","type":"registry:component","target":"components/shadcn-dashboard/blocks/application-shell/application-shell-02/add-notes.tsx"},{"path":"src/components/shadcn-dashboard/blocks/application-shell/application-shell-02/data.ts","content":"$56","type":"registry:component","target":"components/shadcn-dashboard/blocks/application-shell/application-shell-02/data.ts"},{"path":"src/components/shadcn-dashboard/blocks/application-shell/application-shell-02/types.ts","content":"export type NoteColor =\r\n  | \"primary\"\r\n  | \"destructive\"\r\n  | \"chart-2\"\r\n  | \"chart-3\"\r\n  | \"chart-4\";\r\n\r\nexport type Note = {\r\n  id: number;\r\n  title: string;\r\n  color: NoteColor;\r\n  datef: string;\r\n};\r\n\r\nexport type ColorOption = {\r\n  id: number;\r\n  lineColor: NoteColor;\r\n  disp: NoteColor;\r\n};\r\n\r\nexport const colorOptions: ColorOption[] = [\r\n  { id: 1, lineColor: \"chart-4\", disp: \"chart-4\" },\r\n  { id: 2, lineColor: \"primary\", disp: \"primary\" },\r\n  { id: 3, lineColor: \"destructive\", disp: \"destructive\" },\r\n  { id: 4, lineColor: \"chart-2\", disp: \"chart-2\" },\r\n  { id: 5, lineColor: \"chart-3\", disp: \"chart-3\" },\r\n];\r\n","type":"registry:component","target":"components/shadcn-dashboard/blocks/application-shell/application-shell-02/types.ts"}]}]]}],"$L57"]}]
</article></body></html>

Notes Application Shell 01

Installation

Files

app

components

Styles