Feat/backend integration (#17)

* fetching done, pagination and search remaining * fetching done, pagination and search remaining * fetching done, pagination and search remaining * search feature added * pagination remaining, minor clean up done * migrated to next 14 * testing with the errors * pnpm lock added back * edited * comment error fixed * comment error fixed * stable app done * important fields ensured * required removed * fixes done * adjustment added * network added * network added
DeCenter-AI · Mar 20, 2024 · e73add6 · e73add6
1 parent 7f70ff6
commit e73add6
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
     "class-variance-authority": "^0.7.0",
+    "clipboard-copy": "^4.0.1",
     "clsx": "^2.1.0",
     "encoding": "^0.1.13",
     "eslint": "8.49.0",
@@ -45,6 +46,7 @@
     "react-intersection-observer": "^9.5.2",
     "react-spinners": "^0.13.8",
     "sanity": "^3.30.0",
+    "sonner": "^1.4.32",
     "styled-components": "^6.1.8",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "3.3.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sanity/schemas/post.ts b/sanity/schemas/post.ts
@@ -89,6 +89,17 @@ export default defineType({
       title: 'Xapp',
       type: 'string',
     }),
+    defineField({
+      name: 'network',
+      title: 'Network',
+      type: 'string',
+    }),
+    defineField({
+      name: 'address',
+      title: 'Contract Address',
+      type: 'string',
+    }),
+
     defineField({
       name: 'about',
       title: 'About',
@@ -101,15 +112,13 @@ export default defineType({
       type: 'blockContent',
 
       // validation: (Rule) => Rule.required(),
-
     }),
     defineField({
       name: 'prompts',
       title: 'Prompts',
       type: 'blockContent',
 
       // validation: (Rule) => Rule.required(),
-
     }),
     defineField({
       name: 'likes',

diff --git a/src/app/explorer/[slug]/page.tsx b/src/app/explorer/[slug]/page.tsx
@@ -16,6 +16,8 @@ import { CiLinkedin } from "react-icons/ci";
 import ViewPane from '@/components/ViewPane';
 import Nav from '@/components/Nav';
 import Footer from '@/components/ui/footer';
+import { Toaster, toast } from 'sonner';
+
 
 
 const components: PortableTextComponents = {
@@ -43,6 +45,15 @@ export default function Page({ params }: { params: { slug: string } }) {
     const category = searchParams.get('category');
     const [data, setData] = useState<Post | null>(null)
 
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = (text: string) => {
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
+        toast("copied")
+    };
+
     const fetchPosts = async () => {
         const data: Post = await getPostBySlug(params.slug, category ? category : "")
         setData(data)
@@ -52,8 +63,27 @@ export default function Page({ params }: { params: { slug: string } }) {
         fetchPosts()
     }, [])
 
+
+    const truncateAddress = (
+        text: string,
+        startChars: number,
+        endChars: number,
+        maxLength: number
+    ) => {
+        if (text?.length > maxLength) {
+            var start = text.substring(0, startChars);
+            var end = text.substring(text.length - endChars, text.length);
+            while (start.length + end.length < maxLength) {
+                start = start + ".";
+            }
+            return start + end;
+        }
+        return text;
+    };
+
     return (
         <>
+            <Toaster />
             <Nav />
             {/*//! This should be split into individual components... */}
             <div className='w-[90%] md:w-[80%] flex flex-col gap-8 mx-auto mt-4  mb-12'>
@@ -113,12 +143,17 @@ export default function Page({ params }: { params: { slug: string } }) {
                         </div></Link>
 
 
-                        <div className='flex justify-between text-md text-neutral-500 py-3'>
+                        <div className='flex justify-center space-x-6 text-md text-neutral-500 py-3'>
                             {data?.discord && <Link href={`${data?.discord}`} target='_blank'> <RiDiscordLine size={18} /></Link>}
                             {data?.linkedin && <Link href={`${data?.linkedin}`} target='_blank'> <CiLinkedin size={18} /></Link>}
                             {data?.telegram && <Link href={`${data?.telegram}`} target='_blank'> <PiTelegramLogoLight size={18} /></Link>}
                             {data?.xapp && <Link href={`${data?.xapp}`} target='_blank'><FaXTwitter size={15} /></Link>}
                         </div>
+                        <div className='flex justify-center space-x-2 items-center'>
+
+                            {data?.network && <small className='capitalize '>{data?.network}:</small>}
+                            {data?.address && <small onClick={() => handleCopy(data?.address)} className='hover:underline cursor-pointer '>{truncateAddress(data?.address, 4, 4, 11)}</small>}
+                        </div>
                     </div>
                     <div className='md:w-[85%] border flex mt-4 md:mt-0 flex-col gap-7 rounded-md border-primary_11 py-5 px-4'>
                         <div>
@@ -153,7 +188,7 @@ export default function Page({ params }: { params: { slug: string } }) {
                         <ViewPane selected={data ? data?.cat[0].title : "ALL ITEMS"} id={data ? data?._id : ""} />
                     </div>
                 </div>
-            </div>
+            </div >
             <Footer />
         </>
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -12,6 +12,8 @@ export const viewport: Viewport = {
   themeColor: '#fff',
 }
 
+import { Toaster, toast } from 'sonner'
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">

diff --git a/src/app/types/Posts.ts b/src/app/types/Posts.ts
@@ -16,6 +16,8 @@ export type Post = {
   views: number
   likes: number
   xapp: string
+  address: string
+  network: string
   telegram: string
   linkedin: string
   discord: string

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -22,11 +22,10 @@ const Header = () => {
           Explorer
         </h1>
         <p className="font-regular font-archivo text-primary_6  max-w-sm  sm:max-w-xl  md:max-w-2xl mx-auto text-base w-[90%] ">
-          Welcome to the Explorer, the ultimate source for the latest and most advanced AI
-          tools. We have gathered a comprehensive collection of innovative AI
-          technologies, all in one convenient location. Whether you are a seasoned AI
-          enthusiast or just starting out, the Explorer is designed to help you discover
-          and utilize the most cutting-edge AI tools available.
+          Welcome to your AI Explorer, the ultimate source for the latest and hottest AI Project.
+          We have gathered a comprehensive collection of innovative AI projects, all in one convenient location.
+          Whether you are a seasoned
+          AI enthusiast or just starting out, the Explorer is designed to help you discover the hottest AI Project.
         </p>
       </div>
     </header>

diff --git a/src/components/ViewPane.tsx b/src/components/ViewPane.tsx
@@ -33,7 +33,7 @@ export default function ViewPane({ selected, id }: {
     }, [selected])
 
     return (
-        <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-10 mb-14'>
+        <div className='grid grid-cols-1  gap-10 place-items-center sm:place-content-stretch sm:mb-14 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4    '>
             {
                 data.map((detail, idx) => (
                     <AiCard key={idx} detail={detail} />

diff --git a/src/components/ui/aiCard.tsx b/src/components/ui/aiCard.tsx
@@ -7,20 +7,20 @@ export default function AiCard({ detail }: { detail: any }) {
     // console.log(detail)
     return (
         <Link href={`/explorer/${detail ? detail?.currentSlug : ""}?category=${detail ? detail?.categories[0].title : ""}`}>
-            <div className='max-w-[200px] h-[220px] flex flex-col border  px-6 py-4 rounded-3xl gap-3 border-primary_11 '>
+            <div className='  h-auto sm:h-[380px] w-[300px]  flex flex-col border  px-6 py-4 rounded-3xl gap-3 border-primary_11 '>
                 <div className='h-[70%]'>
                     {/* @ts-ignore */}
                     <Image className='min-h-full min-w-full' alt={detail.title} priority width={154} height={144} src={urlFor(detail.mainImage).url()} />
 
 
                 </div>
-                <div className='flex gap-2 flex-col h-[30%]  items-start'>
+                <div className='flex gap-4 flex-col h-[30%]  items-start'>
                     <div className=' '>
                         <span className='text-xs text-primary_7 bg-primary_12 px-2 rounded-2xl py-1 text-center '>{detail?.categories[0].title}</span>
                     </div>
                     <div className='flex w-full justify-between items-center'>
                         <div>
-                            <span className='text-sm font-medium'>{detail?.title}</span>
+                            <span className='text-md font-medium'>{detail?.title}</span>
                         </div>
 
                         <Image src="/arrow_icon.png" alt='' className='pt-1' width={24} height={24} />