[{"data":1,"prerenderedAt":799},["ShallowReactive",2],{"navigation":3,"i-lucide:home":30,"i-lucide:folder":34,"i-lucide:file-text":36,"i-lucide:user":38,"i-simple-icons:linkedin":40,"i-simple-icons:github":43,"\u002Fblog\u002Fend-to-end-frontend":45,"\u002Fblog\u002Fend-to-end-frontend-surround":787,"i-lucide:chevron-left":791,"i-lucide:arrow-right":793,"i-lucide:hash":795,"i-lucide:copy":797},[4],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Blog","\u002Fblog","blog",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"From Code to Production: My End-to-End Frontend Development Workflow","\u002Fblog\u002Fend-to-end-frontend","blog\u002Fend-to-end-frontend",{"title":14,"path":15,"stem":16},"From Mockup to Market: My End-to-End Product Design Process","\u002Fblog\u002Ffrom-mockup-to-market","blog\u002Ffrom-mockup-to-market",{"title":18,"path":19,"stem":20},"How I Built My Design System from Scratch","\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch","blog\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":22,"path":23,"stem":24},"The Psychology of Color in UI Design","\u002Fblog\u002Fpsychology-of-color-in-ui-design","blog\u002Fpsychology-of-color-in-ui-design",{"title":26,"path":27,"stem":28},"The Case for Slow Design in a Fast-Paced Digital World","\u002Fblog\u002Fslow-design-in-fast-paced-digital-world","blog\u002Fslow-design-in-fast-paced-digital-world",false,{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":33},0,24,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"\u002F>\u003Cpath d=\"M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\u002F>\u003C\u002Fg>",{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":35},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"\u002F>",{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":37},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"\u002F>\u003Cpath d=\"M14 2v5a1 1 0 0 0 1 1h5M10 9H8m8 4H8m8 4H8\"\u002F>\u003C\u002Fg>",{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":39},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"\u002F>\u003Ccircle cx=\"12\" cy=\"7\" r=\"4\"\u002F>\u003C\u002Fg>",{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":41,"hidden":42},"\u003Cpath fill=\"currentColor\" d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z\"\u002F>",true,{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":44},"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"id":46,"title":10,"author":47,"body":51,"date":779,"description":780,"extension":781,"image":782,"meta":783,"minRead":784,"navigation":42,"path":11,"seo":785,"stem":12,"__hash__":786},"blog\u002Fblog\u002Fend-to-end-frontend.md",{"name":48,"avatar":49},"Syamsul Amin",{"src":50,"alt":48},"https:\u002F\u002Fmedia.licdn.com\u002Fdms\u002Fimage\u002Fv2\u002FC5103AQGUjEJAw5H88A\u002Fprofile-displayphoto-shrink_800_800\u002Fprofile-displayphoto-shrink_800_800\u002F0\u002F1572930243131?e=1766620800&v=beta&t=qBbo5O_6WS_yZa0MGNQQ_IvAYfR5_bd9PYlGNAY6RyI",{"type":52,"value":53,"toc":754},"minimark",[54,58,66,71,74,79,82,98,101,105,108,122,125,157,161,164,168,171,182,188,191,216,220,223,228,233,238,243,248,253,258,261,265,268,272,275,292,295,309,313,316,349,352,366,370,373,387,391,394,398,401,415,418,537,541,544,558,561,565,568,571,574,591,594,597,608,611,625,629,632,649,652,656,659,662,665,682,685,696,699,702,716,720,723,737,740,744,747,750],[55,56,57],"p",{},"Building a successful frontend application goes far beyond writing HTML, CSS, and JavaScript. It requires a systematic workflow that balances design interpretation, state management, performance optimization, continuous collaboration, and post-launch improvements. Over the years, I have refined an end-to-end approach that helps me deliver stable, scalable, and user-focused products.",[55,59,60,61,65],{},"In this article, I’ll walk you through my complete frontend development process using my recent project ",[62,63,64],"strong",{},"TravelEase",", a web application for booking travel packages, as a real-world example.",[67,68,70],"h2",{"id":69},"phase-1-requirements-planning","Phase 1: Requirements & Planning",[55,72,73],{},"Every project begins by understanding what needs to be built and why it matters.",[75,76,78],"h3",{"id":77},"gathering-functional-requirements","Gathering Functional Requirements",[55,80,81],{},"I start by aligning with designers and stakeholders to define clear feature expectations. For TravelEase, the core requirements included:",[83,84,85,89,92,95],"ul",{},[86,87,88],"li",{},"A trip search interface with filters and categories",[86,90,91],{},"Trip detail pages with gallery, reviews, and itinerary",[86,93,94],{},"A multi-step booking workflow",[86,96,97],{},"A user dashboard showing order history",[55,99,100],{},"We mapped priorities into must-have, should-have, and nice-to-have to ensure a manageable development timeline.",[75,102,104],{"id":103},"translating-design-to-technical-strategy","Translating Design to Technical Strategy",[55,106,107],{},"After reviewing the Figma design, I identified:",[83,109,110,113,116,119],{},[86,111,112],{},"Reusable UI patterns",[86,114,115],{},"Responsive behavior across breakpoints",[86,117,118],{},"Interaction and motion requirements",[86,120,121],{},"Accessibility considerations",[55,123,124],{},"Then I defined the technical foundation:",[83,126,127,133,139,145,151],{},[86,128,129,132],{},[62,130,131],{},"Framework",": Nuxt 3 + TypeScript",[86,134,135,138],{},[62,136,137],{},"Styling",": TailwindCSS",[86,140,141,144],{},[62,142,143],{},"State Management",": Pinia + TanStack Query",[86,146,147,150],{},[62,148,149],{},"Architecture",": File-based pages, composables, and auto-imported components",[86,152,153,156],{},[62,154,155],{},"APIs",": Modular services with clear typing",[67,158,160],{"id":159},"phase-2-environment-setup","Phase 2: Environment Setup",[55,162,163],{},"Before building features, I establish a clean and maintainable environment.",[75,165,167],{"id":166},"project-initialization","Project Initialization",[55,169,170],{},"I bootstrap the project with:",[172,173,178],"pre",{"className":174,"code":176,"language":177},[175],"language-text","pnpm dlx nuxi init travlease-app\n","text",[179,180,176],"code",{"__ignoreMap":181},"",[172,183,186],{"className":184,"code":185,"language":177},[175],"pnpm install\n",[179,187,185],{"__ignoreMap":181},[55,189,190],{},"Then I configure:",[83,192,193,207,210,213],{},[86,194,195,196,199,200,199,203,206],{},"Alias paths (",[179,197,198],{},"~\u002Fcomponents",", ",[179,201,202],{},"~\u002Fcomposables",[179,204,205],{},"~\u002Futils",")",[86,208,209],{},"ESLint + Prettier for code consistency",[86,211,212],{},"TailwindCSS tokens for spacing, colors, and typography",[86,214,215],{},"Nuxt modules for images, SEO, and analytics",[75,217,219],{"id":218},"setting-up-the-project-structure","Setting Up the Project Structure",[55,221,222],{},"My folder structure typically looks like this:",[55,224,225],{},[179,226,227],{},"components\u002F",[55,229,230],{},[179,231,232],{},"layout\u002F",[55,234,235],{},[179,236,237],{},"composables\u002F",[55,239,240],{},[179,241,242],{},"stores\u002F",[55,244,245],{},[179,246,247],{},"server\u002Fapi\u002F",[55,249,250],{},[179,251,252],{},"utils\u002F",[55,254,255],{},[179,256,257],{},"pages\u002F",[55,259,260],{},"This structure supports scalability as the project grows.",[67,262,264],{"id":263},"phase-3-interface-development","Phase 3: Interface Development",[55,266,267],{},"This phase focuses on translating the visual design into clean, reusable, and accessible components.",[75,269,271],{"id":270},"building-atomic-components","Building Atomic Components",[55,273,274],{},"I begin with the smallest building blocks:",[83,276,277,280,283,286,289],{},[86,278,279],{},"Buttons",[86,281,282],{},"Forms (Input, Select, Textarea)",[86,284,285],{},"Cards",[86,287,288],{},"Navigation elements",[86,290,291],{},"Dialogs and drawers",[55,293,294],{},"Each component is designed with:",[83,296,297,300,303,306],{},[86,298,299],{},"Strong TypeScript typings",[86,301,302],{},"Well-defined props and states",[86,304,305],{},"Customization options",[86,307,308],{},"Accessibility by default",[75,310,312],{"id":311},"constructing-pages","Constructing Pages",[55,314,315],{},"After the UI foundation is ready, I assemble pages such as:",[317,318,319,325,331,337,343],"ol",{},[86,320,321,324],{},[62,322,323],{},"Homepage"," – featuring promotions, search, and recommended trips",[86,326,327,330],{},[62,328,329],{},"Search Results"," – complete with filters, sorting, and pagination",[86,332,333,336],{},[62,334,335],{},"Trip Details"," – including galleries, reviews, and pricing logic",[86,338,339,342],{},[62,340,341],{},"Checkout"," – a step-by-step booking process",[86,344,345,348],{},[62,346,347],{},"User Dashboard"," – order history and profile settings",[55,350,351],{},"I pay close attention to:",[83,353,354,357,360,363],{},[86,355,356],{},"Responsiveness",[86,358,359],{},"API loading states",[86,361,362],{},"Navigation flow",[86,364,365],{},"Motion and micro-interactions",[75,367,369],{"id":368},"ensuring-accessibility","Ensuring Accessibility",[55,371,372],{},"This includes:",[83,374,375,378,381,384],{},[86,376,377],{},"Keyboard navigation",[86,379,380],{},"aria-labels for screen readers",[86,382,383],{},"Adequate color contrast",[86,385,386],{},"Clear focus states",[67,388,390],{"id":389},"phase-4-data-handling-state-management","Phase 4: Data Handling & State Management",[55,392,393],{},"Connecting UI with real data is where complexity increases.",[75,395,397],{"id":396},"tanstack-query-for-server-state","TanStack Query for Server State",[55,399,400],{},"TanStack Query handles:",[83,402,403,406,409,412],{},[86,404,405],{},"Data fetching and caching",[86,407,408],{},"Automatic updates",[86,410,411],{},"Retry logic",[86,413,414],{},"Background refresh",[55,416,417],{},"Example:",[172,419,423],{"className":420,"code":421,"language":422,"meta":181,"style":181},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const { data: trips, isLoading } = useQuery({\n  queryKey: ['trips', filters],\n  queryFn: () => api.getTrips(filters),\n});\n","ts",[179,424,425,471,499,527],{"__ignoreMap":181},[426,427,430,434,438,442,445,449,452,455,458,461,465,468],"span",{"class":428,"line":429},"line",1,[426,431,433],{"class":432},"spNyl","const",[426,435,437],{"class":436},"sMK4o"," {",[426,439,441],{"class":440},"swJcz"," data",[426,443,444],{"class":436},":",[426,446,448],{"class":447},"sTEyZ"," trips",[426,450,451],{"class":436},",",[426,453,454],{"class":447}," isLoading ",[426,456,457],{"class":436},"}",[426,459,460],{"class":436}," =",[426,462,464],{"class":463},"s2Zo4"," useQuery",[426,466,467],{"class":447},"(",[426,469,470],{"class":436},"{\n",[426,472,474,477,479,482,485,489,491,493,496],{"class":428,"line":473},2,[426,475,476],{"class":440},"  queryKey",[426,478,444],{"class":436},[426,480,481],{"class":447}," [",[426,483,484],{"class":436},"'",[426,486,488],{"class":487},"sfazB","trips",[426,490,484],{"class":436},[426,492,451],{"class":436},[426,494,495],{"class":447}," filters]",[426,497,498],{"class":436},",\n",[426,500,502,505,507,510,513,516,519,522,525],{"class":428,"line":501},3,[426,503,504],{"class":463},"  queryFn",[426,506,444],{"class":436},[426,508,509],{"class":436}," ()",[426,511,512],{"class":432}," =>",[426,514,515],{"class":447}," api",[426,517,518],{"class":436},".",[426,520,521],{"class":463},"getTrips",[426,523,524],{"class":447},"(filters)",[426,526,498],{"class":436},[426,528,530,532,534],{"class":428,"line":529},4,[426,531,457],{"class":436},[426,533,206],{"class":447},[426,535,536],{"class":436},";\n",[75,538,540],{"id":539},"pinia-for-app-state","Pinia for App State",[55,542,543],{},"Pinia manages:",[83,545,546,549,552,555],{},[86,547,548],{},"User authentication",[86,550,551],{},"UI preferences",[86,553,554],{},"Booking progress",[86,556,557],{},"Session persistence",[55,559,560],{},"This separation keeps the application predictable and easier to debug.",[67,562,564],{"id":563},"phase-5-testing-quality-assurance","Phase 5: Testing & Quality Assurance",[55,566,567],{},"Quality matters as much as features.",[55,569,570],{},"Manual Testing",[55,572,573],{},"I test:",[83,575,576,579,582,585,588],{},[86,577,578],{},"Mobile responsiveness",[86,580,581],{},"Offline and slow-network behavior",[86,583,584],{},"Form validation",[86,586,587],{},"Error states",[86,589,590],{},"Edge cases",[55,592,593],{},"Automated Testing",[55,595,596],{},"I integrate:",[83,598,599,602,605],{},[86,600,601],{},"Vitest – for unit tests",[86,603,604],{},"Playwright – for E2E tests",[86,606,607],{},"Lighthouse – for audits",[55,609,610],{},"TravelEase achieved:",[83,612,613,616,619,622],{},[86,614,615],{},"94 Performance",[86,617,618],{},"98 Accessibility",[86,620,621],{},"100 Best Practices",[86,623,624],{},"100 SEO",[67,626,628],{"id":627},"phase-6-optimization-performance-tuning","Phase 6: Optimization & Performance Tuning",[55,630,631],{},"Performance is a continuous effort.\nI optimize:",[83,633,634,637,640,643,646],{},[86,635,636],{},"Image loading via Nuxt Image",[86,638,639],{},"Lazy loading pages and components",[86,641,642],{},"Minified and tree-shaken dependencies",[86,644,645],{},"Prefetching for likely navigation paths",[86,647,648],{},"Reduced re-renders through memoization",[55,650,651],{},"Initial load time dropped to 1.2s on a 4G network.",[67,653,655],{"id":654},"phase-7-deployment-monitoring","Phase 7: Deployment & Monitoring",[55,657,658],{},"Shipping the app is only the beginning.",[55,660,661],{},"CI\u002FCD Pipeline",[55,663,664],{},"Using GitLab CI, I automate:",[83,666,667,670,673,676,679],{},[86,668,669],{},"Build",[86,671,672],{},"Lint",[86,674,675],{},"Test",[86,677,678],{},"Deployment to production",[86,680,681],{},"PM2 process restart",[55,683,684],{},"Deployment Setup\nThe production environment includes:",[83,686,687,690,693],{},[86,688,689],{},"Nginx as reverse proxy",[86,691,692],{},"Node server (Nuxt SSR) on port 3000",[86,694,695],{},"CDN-served assets",[55,697,698],{},"Monitoring & Post-Launch Improvements",[55,700,701],{},"After launch, I monitor:",[83,703,704,707,710,713],{},[86,705,706],{},"Error logs via Sentry",[86,708,709],{},"Analytics (conversion, retention, drop-off points)",[86,711,712],{},"Performance metrics",[86,714,715],{},"User feedback",[75,717,719],{"id":718},"results-learnings","Results & Learnings",[55,721,722],{},"Within three months of launch:",[83,724,725,728,731,734],{},[86,726,727],{},"40% faster load time than the previous version",[86,729,730],{},"28% higher conversion rate",[86,732,733],{},"72% reduction in client-side errors",[86,735,736],{},"Increased retention due to prefetching and caching strategies",[55,738,739],{},"The biggest takeaway from TravelEase was the importance of strong communication loops—close alignment between developers, designers, and backend engineers significantly boosts product quality.",[67,741,743],{"id":742},"conclusion","Conclusion",[55,745,746],{},"Frontend development is more than converting Figma designs into pages. It’s about balancing architecture, performance, accessibility, collaboration, and continuous iteration.",[55,748,749],{},"By following a flexible yet structured workflow, we can build interfaces that not only look great but also perform consistently and deliver real value to users.",[751,752,753],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":181,"searchDepth":473,"depth":473,"links":755},[756,760,764,769,773,774,775,778],{"id":69,"depth":473,"text":70,"children":757},[758,759],{"id":77,"depth":501,"text":78},{"id":103,"depth":501,"text":104},{"id":159,"depth":473,"text":160,"children":761},[762,763],{"id":166,"depth":501,"text":167},{"id":218,"depth":501,"text":219},{"id":263,"depth":473,"text":264,"children":765},[766,767,768],{"id":270,"depth":501,"text":271},{"id":311,"depth":501,"text":312},{"id":368,"depth":501,"text":369},{"id":389,"depth":473,"text":390,"children":770},[771,772],{"id":396,"depth":501,"text":397},{"id":539,"depth":501,"text":540},{"id":563,"depth":473,"text":564},{"id":627,"depth":473,"text":628},{"id":654,"depth":473,"text":655,"children":776},[777],{"id":718,"depth":501,"text":719},{"id":742,"depth":473,"text":743},"2025-12-09","A deep dive into how I plan, build, test, and ship modern web interfaces—complete with real-world practices, performance insights, and collaboration strategies for scalable frontend development.","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F1181675\u002Fpexels-photo-1181675.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},9,{"title":10,"description":780},"RJOQ65xFNrYO3YC07FWFULMD5csfmIPnUpSUeUPpDTw",[788,789],null,{"title":14,"path":15,"stem":16,"description":790,"children":-1},"A detailed breakdown of my iterative design methodology, from initial research to final handoff, with practical tips for designers at every stage.",{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":792},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m15 18l-6-6l6-6\"\u002F>",{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":794},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"\u002F>",{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":796},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 9h16M4 15h16M10 3L8 21m8-18l-2 18\"\u002F>",{"left":31,"top":31,"width":32,"height":32,"rotate":31,"vFlip":29,"hFlip":29,"body":798},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"\u002F>\u003Cpath d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"\u002F>\u003C\u002Fg>",1785733925102]