From d3cf3fb95683ad18549b4ce164c3e19bf19c0d25 Mon Sep 17 00:00:00 2001 From: sumitm001 Date: Fri, 23 Aug 2024 01:26:11 +0530 Subject: [PATCH] fix: ui --- app/blogs/[slug]/page.tsx | 1 - app/blogs/page.tsx | 11 ++- app/components/@ui/blog-post/index.tsx | 34 ++++---- app/components/@ui/menu-link/index.tsx | 17 ++++ app/components/@ui/page/hero/header/index.tsx | 18 ++++ app/components/article/index.tsx | 31 +++++++ app/components/footer/index.tsx | 9 +- app/components/header/index.tsx | 78 +++++++++--------- app/contact/page.tsx | 42 ++++------ app/explora/page.tsx | 25 ++++++ app/fonts/CanelaDeck-Thin-Trial.otf | Bin 0 -> 75208 bytes app/fonts/CanelaText-Bold-Trial.otf | Bin 0 -> 75680 bytes app/fonts/CanelaText-Medium-Trial.otf | Bin 0 -> 75624 bytes app/fonts/CanelaText-Regular-Trial.otf | Bin 0 -> 75380 bytes app/fonts/CanelaText-Thin-Trial.otf | Bin 0 -> 75064 bytes app/global.css | 13 ++- app/icon.png | Bin 37680 -> 1774 bytes app/layout.tsx | 4 +- app/lib/fonts/index.ts | 40 ++++++++- app/page.tsx | 52 +++++------- public/future-plans.png | Bin 195219 -> 0 bytes public/icon/icon.png | Bin 38367 -> 0 bytes public/sumo_hero.jpg | Bin 42226 -> 0 bytes tailwind.config.js | 25 +++++- 24 files changed, 274 insertions(+), 126 deletions(-) create mode 100644 app/components/@ui/menu-link/index.tsx create mode 100644 app/components/@ui/page/hero/header/index.tsx create mode 100644 app/components/article/index.tsx create mode 100644 app/explora/page.tsx create mode 100644 app/fonts/CanelaDeck-Thin-Trial.otf create mode 100644 app/fonts/CanelaText-Bold-Trial.otf create mode 100644 app/fonts/CanelaText-Medium-Trial.otf create mode 100644 app/fonts/CanelaText-Regular-Trial.otf create mode 100644 app/fonts/CanelaText-Thin-Trial.otf delete mode 100644 public/future-plans.png delete mode 100644 public/icon/icon.png delete mode 100644 public/sumo_hero.jpg diff --git a/app/blogs/[slug]/page.tsx b/app/blogs/[slug]/page.tsx index 12c2b55..62e2799 100644 --- a/app/blogs/[slug]/page.tsx +++ b/app/blogs/[slug]/page.tsx @@ -3,7 +3,6 @@ import { CustomMDX } from '@/components/mdx' import { formatDate, getBlogPosts } from '@/blogs/utils' import { baseUrl } from '@/sitemap' import Footer from '@/components/footer' -import Header from '@/components/header' import Link from 'next/link' export async function generateStaticParams() { diff --git a/app/blogs/page.tsx b/app/blogs/page.tsx index dad96fd..f389b9e 100644 --- a/app/blogs/page.tsx +++ b/app/blogs/page.tsx @@ -1,9 +1,16 @@ import Footer from "@/components/footer" import Header from "@/components/header" import { BlogPosts } from "@/components/posts" +import { Metadata } from "next" + + +export const metadata: Metadata = { + title: 'Blogs' +} + const Page = () => { return ( -
+ <>
{/* article */}
@@ -14,7 +21,7 @@ const Page = () => {
-
+ ) } diff --git a/app/components/@ui/blog-post/index.tsx b/app/components/@ui/blog-post/index.tsx index a51553a..7655976 100644 --- a/app/components/@ui/blog-post/index.tsx +++ b/app/components/@ui/blog-post/index.tsx @@ -1,39 +1,39 @@ -import Link from "next/link" -import Image from "next/image" -import { formatDate } from "@/blogs/utils" +import Link from "next/link"; +import Image from "next/image"; +import { formatDate } from "@/blogs/utils"; +import { canela_th, canela_regu } from "@/lib/fonts"; interface TBlogPost { - slug: string - title: string - publishedAt?: string - summary?: string + slug: string; + title: string; + publishedAt?: string; + summary?: string; } const BlogPost = ({ slug, title, publishedAt, summary }: TBlogPost) => { return (
-
+
-
+
{title}
-
+
{formatDate(publishedAt, false)}
-
+
{summary}
{`${slug}`} {
- ) -} + ); +}; -export default BlogPost +export default BlogPost; diff --git a/app/components/@ui/menu-link/index.tsx b/app/components/@ui/menu-link/index.tsx new file mode 100644 index 0000000..59f7b51 --- /dev/null +++ b/app/components/@ui/menu-link/index.tsx @@ -0,0 +1,17 @@ +import Link from "next/link" +import { lato } from "@/lib/fonts" +type TMenuLink = { + href: string + value: string + postText?: string +} + +const MenuLink = ( {href, value, postText}: TMenuLink ) => { + return ( + + {value} {postText && {postText}} + + ) +} + +export default MenuLink \ No newline at end of file diff --git a/app/components/@ui/page/hero/header/index.tsx b/app/components/@ui/page/hero/header/index.tsx new file mode 100644 index 0000000..7cfd91e --- /dev/null +++ b/app/components/@ui/page/hero/header/index.tsx @@ -0,0 +1,18 @@ +import { canela } from "@/lib/fonts"; + +type HeroHeaderProps = { + text: string; + postText?: string | null; +}; + +const HeroHeader: React.FC = ({ text, postText = null }) => { + return ( +
+ {text} {postText && {postText}} +
+ ); +}; + +export default HeroHeader; diff --git a/app/components/article/index.tsx b/app/components/article/index.tsx new file mode 100644 index 0000000..9eaa2d4 --- /dev/null +++ b/app/components/article/index.tsx @@ -0,0 +1,31 @@ +import React from "react" +import Header from "@/components/header" +import Footer from "@/components/footer" +import HeroHeader from "@/components/@ui/page/hero/header" + +type TMetaData = { + children: React.ReactNode + heroHeaderText: string + postText?: string +} + +const Article = ( { children, heroHeaderText, postText }: TMetaData ) => { + return ( + <> +
+
+
+ + {/* Here goes rest of content */} +
+ { children } +
+
+ +
+
+ + ) +} + +export default Article diff --git a/app/components/footer/index.tsx b/app/components/footer/index.tsx index 531707c..9357591 100644 --- a/app/components/footer/index.tsx +++ b/app/components/footer/index.tsx @@ -1,19 +1,20 @@ +import { canela_th } from "@/lib/fonts"; import Link from "next/link"; const Footer = () => { return ( -
+
{/* left */}
© 2024 - SUMITSO + SUMITSO
{/* right */}
- To the top - Up + To the top + Up
diff --git a/app/components/header/index.tsx b/app/components/header/index.tsx index c0f712f..ab52a34 100644 --- a/app/components/header/index.tsx +++ b/app/components/header/index.tsx @@ -1,9 +1,10 @@ "use client" import Link from "next/link"; import { Abel } from 'next/font/google'; -import Image from "next/image"; -import { amstelvar } from "@/lib/fonts"; +// import Image from "next/image"; +import { amstelvar, canela } from "@/lib/fonts"; import { useState } from "react"; +import MenuLink from "../@ui/menu-link"; const acme = Abel({ subsets: ['latin'], @@ -20,45 +21,47 @@ const Header = () => { } return ( -