- starting implementarion of the custom news feed

- implemented nav component
JVGS1111 · Aug 6, 2024 · 7174ead · 7174ead
1 parent 13cc1c1
commit 7174ead
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 8 deletions.
diff --git a/src/pages/custom-news-feed/components/navigator.tsx b/src/pages/custom-news-feed/components/navigator.tsx
@@ -0,0 +1,47 @@
+import { useState } from 'react'
+
+interface NavigatorProps {
+  onChange: (valeu: string) => void
+  options: string[]
+  defaultValue?: string
+}
+
+export function Navigator({
+  onChange,
+  options,
+  defaultValue = '',
+}: NavigatorProps) {
+  const [checked, setCheked] = useState(defaultValue)
+
+  function renderButton(_options: string[]) {
+    if (!_options || _options.length === 0) {
+      return null
+    }
+
+    return _options.map((item) => {
+      return (
+        <button
+          onClick={() => {
+            handleChangePage(item)
+          }}
+          key={item}
+          data-ui={item === checked ? 'checked' : ''}
+          className="relative flex h-full items-center justify-center px-3 data-checked:after:absolute data-checked:after:bottom-0 data-checked:after:h-0.5 data-checked:after:w-full data-checked:after:bg-slate-800"
+        >
+          {item}
+        </button>
+      )
+    })
+  }
+
+  function handleChangePage(value: string) {
+    setCheked(value)
+    onChange(value)
+  }
+
+  return (
+    <div className="flex h-10 w-full flex-row items-center border-b-half border-slate-400">
+      {renderButton(options)}
+    </div>
+  )
+}
diff --git a/src/pages/custom-news-feed/index.page.tsx b/src/pages/custom-news-feed/index.page.tsx
@@ -0,0 +1,15 @@
+import { Header } from '@/components/header'
+import Head from 'next/head'
+import { NewsFeedContainer } from './news-feed-container'
+
+export default function CustomNewsFeed() {
+  return (
+    <>
+      <Head>
+        <title>feed | News Agreggator</title>
+      </Head>
+      <Header />
+      <NewsFeedContainer />
+    </>
+  )
+}
diff --git a/src/pages/custom-news-feed/news-feed-container.tsx b/src/pages/custom-news-feed/news-feed-container.tsx
@@ -0,0 +1,9 @@
+import { Navigator } from './components/navigator'
+const tabs = ['News Feed', 'Preferences']
+export function NewsFeedContainer() {
+  return (
+    <section className="m-auto mt-16 flex w-full max-w-feed flex-col items-center justify-center px-6 pb-6">
+      <Navigator options={tabs} onChange={() => {}} defaultValue={tabs[0]} />
+    </section>
+  )
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -10,14 +10,6 @@ const config = {
   ],
   prefix: '',
   theme: {
-    screens: {
-      xs: '576px',
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-      '2xl': '1400px',
-    },
     container: {
       center: true,
       padding: '2rem',
@@ -26,6 +18,9 @@ const config = {
       },
     },
     extend: {
+      screens: {
+        xs: '576px',
+      },
       fontFamily: {
         sans: ['Roboto'],
       },
@@ -101,6 +96,9 @@ const config = {
         'accordion-up': 'accordion-up 0.2s ease-out',
       },
     },
+    data: {
+      checked: 'ui~="checked"',
+    },
   },
   plugins: [require('tailwindcss-animate')],
 } satisfies Config