Cookbook Landing Page Front End (#53073)

src/landings/components/CategoryLanding.tsx

@@ -1,16 +1,20 @@
 import { useRouter } from 'next/router'
 import cx from 'classnames'
+import { CookBookArticleCard } from './CookBookArticleCard'
+import { CookBookFilter } from './CookBookFilter'
 
-import { useCategoryLandingContext } from 'src/frame/components/context/CategoryLandingContext'
+//import { useTranslation } from 'src/languages/components/useTranslation'
 import { DefaultLayout } from 'src/frame/components/DefaultLayout'
 import { ArticleTitle } from 'src/frame/components/article/ArticleTitle'
 import { Lead } from 'src/frame/components/ui/Lead'
+import { useCategoryLandingContext } from 'src/frame/components/context/CategoryLandingContext'
 import { ClientSideRedirects } from 'src/rest/components/ClientSideRedirects'
 import { RestRedirect } from 'src/rest/components/RestRedirect'
 import { Breadcrumbs } from 'src/frame/components/page-header/Breadcrumbs'
 
 export const CategoryLanding = () => {
   const router = useRouter()
+  //const { t } = useTranslation('toc')
   const { title, intro, tocItems } = useCategoryLandingContext()
 
   // tocItems contains directories and its children, we only want the child articles
@@ -28,38 +32,31 @@ export const CategoryLanding = () => {
           <Breadcrumbs />
         </div>
         <ArticleTitle>{title}</ArticleTitle>
-
         {intro && <Lead data-search="lead">{intro}</Lead>}
 
         <h2 className="py-5">Spotlight</h2>
-        <div className="container-lg clearfix">
+        <div className="d-md-flex d-sm-block">
-          <div className="col-4 float-left border p-4">Spotlight 1</div>
+          <CookBookArticleCard image="DeleteMe" spotlight={true} />
-          <div className="col-4 float-left border p-4">Spotlight 2</div>
+          <CookBookArticleCard image="DeleteMe" spotlight={true} />
-          <div className="col-4 float-left border p-4">Spotlight 3</div>
+          <CookBookArticleCard image="DeleteMe" spotlight={true} />
         </div>
 
         <div className="pt-8">
-          <div className="py-5 clearfix border-bottom">
+          <div className="py-5 border-bottom">
-            <div className="col-5 float-left p-3">
+            <div className="col-lg-4 col-sm-12 float-md-left pb-3 mr-5 ml-1">
               <h2>Explore {onlyFlatItems.length} prompt articles</h2>
             </div>
-            <div className="col-3 float-left p-4">Searchbar</div>
+            <div>
-            <div className="col-1 float-left p-4">Category</div>
+              <CookBookFilter />
-            <div className="col-1 float-left p-4">Complexity</div>
+            </div>
-            <div className="col-1 float-left p-4">Industry</div>
-            <div className="col-1 float-left p-4">Reset</div>
           </div>
-          <div className="clearfix gutter-md-spacious">
+          <ul className="clearfix gutter-md-spacious">
-            {/* TODO: replace with card components */}
             {onlyFlatItems.map((item, index) => (
-              <div key={index} className="col-4 float-left p-4">
+              <li key={index} className="col-md-4 col-sm-12 list-style-none float-left p-4">
-                <div className="px-3 pb-3 border-bottom">
+                <CookBookArticleCard title={item.title} description={item.intro} />
-                  <div>{item.title}</div>
+              </li>
-                  <div>{item.intro}</div>
-                </div>
-              </div>
             ))}
-          </div>
+          </ul>
         </div>
       </div>
     </DefaultLayout>

src/landings/components/CookBookArticleCard.tsx

@@ -0,0 +1,82 @@
+import { Label, LabelGroup } from '@primer/react'
+import { BugIcon } from '@primer/octicons-react'
+
+type Props = {
+  title?: string
+  icon?: string
+  url?: string
+  description?: string
+  tags?: string[]
+  spotlight?: boolean
+  image?: string
+  complexity?: string
+}
+
+const defaultProps = {
+  title: 'Article Name',
+  description:
+    'Man bun letterpress put a bird on it la croix offal, meh grailed hot chicken kombucha gochujang messenger bag fit before they sold out lyft.',
+  tags: ['Tag Example', 'Tag Example'],
+  icon: 'bugicon',
+}
+
+function setIcon(icon: string) {
+  switch (icon) {
+    case 'bugicon':
+      return <BugIcon size={48} className="mr-4 bgColor-accent-muted p-3 circle fgColor-accent" />
+    case 'none':
+      return null
+    default:
+      return null
+  }
+}
+
+function setImage(image: string) {
+  return (
+    // <div className="d-flex flex-column flex-align-center">
+    image ? (
+      <div
+        style={{
+          width: 'max-width',
+          height: 200,
+          backgroundColor: 'gray',
+          marginBottom: 20,
+          borderRadius: 5,
+        }}
+      ></div>
+    ) : null
+    // </div>
+  )
+}
+const spotlightClasses = 'd-flex flex-column align-items-center'
+export const CookBookArticleCard = ({
+  title = defaultProps.title,
+  icon = defaultProps.icon,
+  tags = defaultProps.tags,
+  description = defaultProps.description,
+  image = '',
+  spotlight = false,
+}: Props) => {
+  return (
+    <div className="m-2">
+      <div
+        style={{ minHeight: 200 }}
+        className={spotlight ? spotlightClasses : 'd-flex pb-3 border-bottom'}
+      >
+        {spotlight ? setImage(image) : null}
+        {spotlight ? setIcon('none') : setIcon(icon)}
+        <div>
+          <h3 className="h4">{title}</h3>
+          <div className="fgColor-muted mb-3 mt-2">{description}</div>
+          <LabelGroup>
+            {tags.map((tag, index) => (
+              <Label key={index} variant="accent" sx={{ mr: 1 }} size="small">
+                {tag}
+              </Label> //fix this to have unique keys
+            ))}
+          </LabelGroup>
+        </div>
+      </div>
+    </div>
+  )
+}

src/landings/components/CookBookFilter.tsx

@@ -0,0 +1,60 @@
+import { TextInput, ActionMenu, ActionList, Button } from '@primer/react'
+import { SearchIcon } from '@primer/octicons-react'
+
+export const CookBookFilter = () => {
+  return (
+    <>
+      <div>
+        <TextInput
+          leadingVisual={SearchIcon}
+          className="float-lg-left m-1"
+          sx={{ minWidth: ['stretch', 'stretch', 'stretch', 250] }}
+          placeholder="Search articles"
+        />
+      </div>
+      <div className="d-flex">
+        <ActionMenu>
+          <ActionMenu.Button className="col-md-1 col-sm-2 float-md-left m-1">
+            Category
+          </ActionMenu.Button>
+          <ActionMenu.Overlay width="small">
+            <ActionList>
+              <ActionList.Item>Item 1</ActionList.Item>
+              <ActionList.Item>Item 2</ActionList.Item>
+              <ActionList.Item>Item 3</ActionList.Item>
+            </ActionList>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+
+        <ActionMenu>
+          <ActionMenu.Button className="col-md-1 col-sm-2 float-left m-1">
+            Complexity
+          </ActionMenu.Button>
+          <ActionMenu.Overlay width="small">
+            <ActionList>
+              <ActionList.Item>Item 1</ActionList.Item>
+              <ActionList.Item>Item 2</ActionList.Item>
+              <ActionList.Item>Item 3</ActionList.Item>
+            </ActionList>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+
+        <ActionMenu>
+          <ActionMenu.Button className="col-md-1 col-sm-2 float-left m-1">
+            Industry
+          </ActionMenu.Button>
+          <ActionMenu.Overlay width="small">
+            <ActionList>
+              <ActionList.Item>Item 1</ActionList.Item>
+              <ActionList.Item>Item 2</ActionList.Item>
+              <ActionList.Item>Item 3</ActionList.Item>
+            </ActionList>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+        <Button variant="invisible" className="col-md-1 col-sm-2 float-left mt-1">
+          Reset filters
+        </Button>
+      </div>
+    </>
+  )
+}