{"version":3,"sources":["../src/patterns/LayoutShell.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface LayoutShellProps {\n  children: React.ReactNode\n  sidebar?: {\n    logo?: React.ReactNode\n    navigation: React.ReactNode\n    user?: React.ReactNode\n  }\n  topbar?: {\n    title?: string\n    breadcrumb?: React.ReactNode\n    search?: boolean\n    notifications?: boolean\n  }\n  content?: {\n    header?: React.ReactNode\n  }\n}\n\nexport const LayoutShell: React.FC<LayoutShellProps> = ({\n  children,\n  sidebar = {\n    navigation: null,\n    user: null,\n  },\n  topbar = {\n    title: '',\n    breadcrumb: null,\n    search: true,\n    notifications: true,\n  },\n  content = {\n    header: null,\n  },\n}) => {\n  return (\n    <div className=\"flex h-screen bg-slate-50\">\n      {/* Sidebar */}\n      <aside className=\"w-[220px] bg-slate-50 border-r border-slate-100 flex flex-col py-4 flex-shrink-0\">\n        {/* Logo */}\n        <div className=\"px-4 mb-5 flex items-center gap-2.5\">\n          {sidebar.logo || (\n            <>\n              <div className=\"w-8 h-8 rounded-[10px] bg-gradient-to-br from-teal-400 to-teal-500 flex items-center justify-center\">\n                <span className=\"text-white text-sm font-black\">CP</span>\n              </div>\n              <div>\n                <div className=\"text-[13px] font-extrabold text-slate-900\">Console</div>\n                <div className=\"text-[9px] text-slate-400 font-semibold\">Admin Panel</div>\n              </div>\n            </>\n          )}\n        </div>\n\n        {/* Navigation */}\n        <nav className=\"flex-1 px-2 overflow-y-auto\">{sidebar.navigation}</nav>\n\n        {/* User Profile */}\n        <div className=\"px-2 border-t border-slate-100 pt-3\">\n          {sidebar.user || (\n            <div className=\"flex items-center gap-2.5 px-3 py-2\">\n              <div className=\"w-7 h-7 rounded-lg bg-slate-200 flex items-center justify-center text-[11px] font-bold text-slate-500\">\n                사용자\n              </div>\n              <div>\n                <div className=\"text-[11px] font-bold text-slate-900\">사용자</div>\n                <div className=\"text-[9px] text-slate-400\">팀</div>\n              </div>\n            </div>\n          )}\n        </div>\n      </aside>\n\n      {/* Main Area */}\n      <div className=\"flex-1 flex flex-col min-w-0\">\n        {/* Top Bar */}\n        <header className=\"h-12 border-b border-slate-100 flex items-center justify-between px-6 bg-white flex-shrink-0\">\n          <div className=\"flex items-center gap-1.5 text-xs\">\n            {topbar.breadcrumb || (\n              <div className=\"flex items-center gap-1.5 text-xs\">\n                <span className=\"text-slate-400\">메인</span>\n                <span className=\"text-slate-300\">/</span>\n                <span className=\"font-bold text-slate-900\">{topbar.title || '대시보드'}</span>\n              </div>\n            )}\n          </div>\n\n          <div className=\"flex items-center gap-3\">\n            {topbar.search && (\n              <div className=\"relative\">\n                <span className=\"material-symbols-outlined absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 text-[14px]\">\n                  search\n                </span>\n                <input\n                  className=\"bg-slate-50 border border-slate-200 rounded-lg pl-8 pr-3 py-1.5 text-[11px] w-48 focus:ring-1 focus:ring-teal-500 outline-none\"\n                  placeholder=\"검색...\"\n                />\n              </div>\n            )}\n\n            {topbar.notifications && (\n              <div className=\"relative cursor-pointer\">\n                <span className=\"material-symbols-outlined text-slate-400 text-[20px] hover:text-slate-600 transition-colors\">\n                  notifications\n                </span>\n                <div className=\"absolute -top-0.5 -right-0.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white\" />\n              </div>\n            )}\n          </div>\n        </header>\n\n        {/* Content Area */}\n        <main className=\"flex-1 overflow-y-auto p-6 bg-slate-50\">\n          {content.header}\n          {children}\n        </main>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AA2CY,mBAEI,KAEF,YAJF;AAvBL,IAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,MAAM;AAAA,EACR;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,eAAe;AAAA,EACjB;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,EACV;AACF,MAAM;AACJ,SACE,qBAAC,SAAI,WAAU,6BAEb;AAAA,yBAAC,WAAM,WAAU,oFAEf;AAAA,0BAAC,SAAI,WAAU,uCACZ,kBAAQ,QACP,iCACE;AAAA,4BAAC,SAAI,WAAU,uGACb,8BAAC,UAAK,WAAU,iCAAgC,gBAAE,GACpD;AAAA,QACA,qBAAC,SACC;AAAA,8BAAC,SAAI,WAAU,6CAA4C,qBAAO;AAAA,UAClE,oBAAC,SAAI,WAAU,2CAA0C,yBAAW;AAAA,WACtE;AAAA,SACF,GAEJ;AAAA,MAGA,oBAAC,SAAI,WAAU,+BAA+B,kBAAQ,YAAW;AAAA,MAGjE,oBAAC,SAAI,WAAU,uCACZ,kBAAQ,QACP,qBAAC,SAAI,WAAU,uCACb;AAAA,4BAAC,SAAI,WAAU,yGAAwG,gCAEvH;AAAA,QACA,qBAAC,SACC;AAAA,8BAAC,SAAI,WAAU,wCAAuC,gCAAG;AAAA,UACzD,oBAAC,SAAI,WAAU,6BAA4B,oBAAC;AAAA,WAC9C;AAAA,SACF,GAEJ;AAAA,OACF;AAAA,IAGA,qBAAC,SAAI,WAAU,gCAEb;AAAA,2BAAC,YAAO,WAAU,gGAChB;AAAA,4BAAC,SAAI,WAAU,qCACZ,iBAAO,cACN,qBAAC,SAAI,WAAU,qCACb;AAAA,8BAAC,UAAK,WAAU,kBAAiB,0BAAE;AAAA,UACnC,oBAAC,UAAK,WAAU,kBAAiB,eAAC;AAAA,UAClC,oBAAC,UAAK,WAAU,4BAA4B,iBAAO,SAAS,4BAAO;AAAA,WACrE,GAEJ;AAAA,QAEA,qBAAC,SAAI,WAAU,2BACZ;AAAA,iBAAO,UACN,qBAAC,SAAI,WAAU,YACb;AAAA,gCAAC,UAAK,WAAU,mGAAkG,oBAElH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,aAAY;AAAA;AAAA,YACd;AAAA,aACF;AAAA,UAGD,OAAO,iBACN,qBAAC,SAAI,WAAU,2BACb;AAAA,gCAAC,UAAK,WAAU,+FAA8F,2BAE9G;AAAA,YACA,oBAAC,SAAI,WAAU,sFAAqF;AAAA,aACtG;AAAA,WAEJ;AAAA,SACF;AAAA,MAGA,qBAAC,UAAK,WAAU,0CACb;AAAA,gBAAQ;AAAA,QACR;AAAA,SACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}