{"id":2305,"date":"2024-06-27T08:43:30","date_gmt":"2024-06-27T07:43:30","guid":{"rendered":"https:\/\/sns.nutrinest.me\/?page_id=2305"},"modified":"2024-06-27T09:38:47","modified_gmt":"2024-06-27T08:38:47","slug":"template-selection-optional","status":"publish","type":"page","link":"https:\/\/sns.nutrinest.me\/?page_id=2305","title":{"rendered":"2 Template Selection (Optional)"},"content":{"rendered":"<p>const TemplateSelection = () => {<br \/>\n  const [searchQuery, setSearchQuery] = useState(&#8221;);<br \/>\n  const filteredTemplates = templates.filter(template =><br \/>\n    template.name.toLowerCase().includes(searchQuery.toLowerCase())<br \/>\n  );<br \/>\n  return (<\/p>\n<header className=\"header\">\n        <img decoding=\"async\" src=\"\/logo.png\" alt=\"App Logo\" className=\"logo\" \/><br \/>\n        Settings | Profile | Sign Out<br \/>\n      <\/header>\n<p>      <main className=\"main-content\"><br \/>\n          <input\n            type=\"text\"\n            placeholder=\"Search templates...\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}<br \/>\n          \/><br \/>\n          <button>Weight Loss<\/button><br \/>\n          <button>Vegetarian<\/button><br \/>\n          <button>Vegan<\/button><br \/>\n          <button>Diabetic-Friendly<\/button><br \/>\n          <button>High Protein<\/button><br \/>\n          <button>Low Carb<\/button><br \/>\n          {filteredTemplates.map(template => (<br \/>\n              <img src={template.image} alt={template.name} \/><\/p>\n<h3>{template.name}<\/h3>\n<p>{template.description}<\/p>\n<p>              <button>Select Template<\/button><br \/>\n          ))}<br \/>\n      <\/main><\/p>\n<footer className=\"footer\">\n        <a href=\"\/help\">Help &#038; Support<\/a><br \/>\n        <a href=\"\/terms\">Terms &#038; Privacy<\/a><br \/>\n      <\/footer>\n<p>  );<br \/>\n};<br \/>\nexport default TemplateSelection;\t\t<\/p>\n<pre data-line=\"\">\n\t\t\t\t<code readonly=\"true\">\n\t\t\t\t\t<xmp>console.log( .template-selection {\n  font-family: Arial, sans-serif;\n}\n.header {\n  display: flex;\n  justify-content: space-between;\n  padding: 10px 20px;\n  background-color: #f8f8f8;\n  border-bottom: 1px solid #ddd;\n}\n.logo {\n  height: 40px;\n}\n.user-menu {\n  align-self: center;\n}\n.main-content {\n  padding: 20px;\n}\n.search-bar input {\n  width: 100%;\n  padding: 10px;\n  margin-bottom: 20px;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n}\n.categories {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n.categories button {\n  padding: 10px 20px;\n  border: none;\n  background-color: #007bff;\n  color: #fff;\n  border-radius: 5px;\n  cursor: pointer;\n}\n.template-gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 20px;\n}\n.template-thumbnail {\n  border: 1px solid #ddd;\n  border-radius: 5px;\n  padding: 10px;\n  text-align: center;\n}\n.template-thumbnail img {\n  width: 100%;\n  height: auto;\n  border-radius: 5px;\n  margin-bottom: 10px;\n}\n.template-thumbnail button {\n  padding: 10px 20px;\n  border: none;\n  background-color: #28a745;\n  color: #fff;\n  border-radius: 5px;\n  cursor: pointer;\n}\n.footer {\n  padding: 10px 20px;\n  background-color: #f8f8f8;\n  border-top: 1px solid #ddd;\n  text-align: center;\n}\n.footer a {\n  margin: 0 10px;\n  color: #007bff;\n  text-decoration: none;\n}\n.footer a:hover {\n  text-decoration: underline; );<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>const TemplateSelection = () => { const [searchQuery, setSearchQuery] = useState(&#8221;); const filteredTemplates = templates.filter(template => template.name.toLowerCase().includes(searchQuery.toLowerCase()) ); return ( [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"_links":{"self":[{"href":"https:\/\/sns.nutrinest.me\/index.php?rest_route=\/wp\/v2\/pages\/2305"}],"collection":[{"href":"https:\/\/sns.nutrinest.me\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sns.nutrinest.me\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sns.nutrinest.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sns.nutrinest.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2305"}],"version-history":[{"count":11,"href":"https:\/\/sns.nutrinest.me\/index.php?rest_route=\/wp\/v2\/pages\/2305\/revisions"}],"predecessor-version":[{"id":2348,"href":"https:\/\/sns.nutrinest.me\/index.php?rest_route=\/wp\/v2\/pages\/2305\/revisions\/2348"}],"wp:attachment":[{"href":"https:\/\/sns.nutrinest.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}