ui

qinjiangban · Jun 2, 2024 · 68de96c · 68de96c
1 parent 2e33c3b
commit 68de96c
Show file tree

Hide file tree

Showing 25 changed files with 269 additions and 164 deletions.
diff --git a/app/(Nav)/(home)/layout.tsx b/app/(Nav)/(home)/layout.tsx
@@ -35,28 +35,34 @@ export default function Home({ children }) {
     }
   ]
   return (
-    <div className="mx-auto lg:max-w-4xl  h-full lg:justify-center pb-12  flex  flex-col ">
+    <div className="mx-auto lg:max-w-4xl  lg:justify-center pb-14  flex  flex-col ">
 
 
-      <div className="flex flex-row  border-l w-[100vw] lg:w-full z-20 h-16 sm:mt-16 items-center ">
+
+      <div className="flex flex-row border-x-0 md:border-x w-[100vw] lg:w-full z-20 h-16 md:mt-16 items-center ">
         {linknav.map((item) => (
           <div className='mx-auto flex-col sm:flex-row  justify-around w-[20%] flex hover:bg-[--link-hover-background]  z-20' key={item.href}>
 
-
-          <Link  href={item.href} className={`z-20 flex items-center justify-center w-[100%] h-16 flex-col sm:flex-row  text-[#878787] border-r border-b ${pathname === item.href ? 'text-primary  border-b border-b-primary' : ''}`}>
-              <div className=' justify-center text-2xl sm:text-xl z-20'> {item.logo} </div>
-              <p className="text-sm ml-2 sm:ml-0 text-inherit z-20 text-center sm:text-justify">{item.name}</p>
+          <Link  href={item.href} className={`z-20 flex items-center justify-center w-[100%] h-16 flex-col sm:flex-row  text-[#878787]  border-b ${pathname === item.href ? 'text-info border-b-2 border-b-info' : ''}`}>
+              <div className=' justify-center text-2xl sm:text-3xl z-20'> {item.logo} </div>
+              <p className="text-sm text-inherit z-20 text-center">{item.name}</p>
           </Link>
+
           </div>
         ))}
       </div>
 
+
+
       <div className=''>
 
         {children}
 
       </div>
 
+
+
+
     </div>
   )
 }

diff --git a/app/(Nav)/(home)/music/page.tsx b/app/(Nav)/(home)/music/page.tsx
@@ -74,7 +74,7 @@ export default function Page() {
 
   return (
     <>
-      <div className="flex flex-1 flex-wrap flex-col max-w-4xl mx-auto">
+      <div className="flex flex-wrap flex-col justify-normal lg:justify-center lg:w-full w-[100vw]">
 
 
         {loadingMusicPubs && (
@@ -86,7 +86,7 @@ export default function Page() {
 
         {musicPubs?.map(publication => (
           <div
-            className="border-b border-l border-r sm:border-r-0 sm:border-l-0 hover:bg-[#6463631a]"
+            className="md:border  border-b border-t-0 hover:bg-[--link-hover-background] w-dvw  lg:max-w-4xl py-6 lg:px-6 "
             key={publication.id}
             onClick={() => router.push(`https://share.lens.xyz/p/${publication.id}`)}
           >
@@ -105,23 +105,23 @@ export default function Page() {
 
 
               <div>
+                <ReactMarkdown className=" mt-4 break-words ">
+                  {publication.metadata.content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '[LINK]($1)')}
+                </ReactMarkdown>
                 <img
-                  className={`max-w-[400px] h-auto sm:max-w-[100%]   sm:h-auto mb-3  sm:rounded-none  rounded-2xl object-cover`}
+                  className={`sm:max-w-[400px] h-auto max-w-[100%]   sm:h-auto mb-3  sm:rounded-none  rounded-2xl object-cover`}
                   alt='audio img'
                   src={publication.__typename === 'Post' ?
                     publication.metadata?.asset?.cover?.optimized?.uri ?
                       publication.metadata?.asset?.cover?.optimized?.uri :
                       publication.metadata?.asset?.cover?.optimized?.raw?.uri : ''}
                 />
-                <audio controls>
+                <audio controls className={`sm:w-[400px] `}>
                   <source
                     type={publication.metadata?.asset?.audio?.optimized?.mimeType}
                     src={publication.metadata?.asset?.audio?.optimized?.uri}
                   />
                 </audio>
-                <ReactMarkdown className=" mt-4 break-words ">
-                  {publication.metadata.content.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '[LINK]($1)')}
-                </ReactMarkdown>
               </div>
 
 

diff --git a/app/(Nav)/(home)/page.tsx b/app/(Nav)/(home)/page.tsx
@@ -87,7 +87,7 @@ export default function Page() {
 
 
         {publications?.map((publication: any) => (
-          <div key={publication.id} className="md:border sm:border-t-0 border-b border-t-0 hover:bg-[--link-hover-background] w-dvw  lg:max-w-4xl py-6 lg:px-6" >
+          <div key={publication.id} className="md:border  border-b border-t-0 hover:bg-[--link-hover-background] w-dvw  lg:max-w-4xl py-6 lg:px-6" >
 
             {/* users  */}
             <div className=" flex px-6 lg:px-0">

diff --git a/app/(Nav)/find/page.jsx b/app/(Nav)/find/page.jsx
@@ -1,7 +1,7 @@
 import Creator from './creator/page'
 export default function Page() {
   return (
-    <div className=' sm:mt-16'>
+    <div className=' md:mt-16'>
     <Creator />
     </div>
   )

diff --git a/app/(Nav)/layout.tsx b/app/(Nav)/layout.tsx
@@ -1,12 +1,14 @@
 
-import Nav from '@/components/nav/Navbar'
+import Navbar from '@/components/nav/Navbar'
+import NavHeader from '@/components/nav/NavHeader'
 
 
 export default function layout({children}) {
    return (
      <>
+     <NavHeader />
      {children}
-     <Nav />
+     <Navbar />
      </>
    )
 }
diff --git a/app/(Nav)/message/chat/page.tsx b/app/(Nav)/message/chat/page.tsx
@@ -0,0 +1,8 @@
+export default function chatpage() {
+    return (
+        <div>
+
+            聊天
+        </div>
+    )
+}
diff --git a/app/(Nav)/message/community/page.tsx b/app/(Nav)/message/community/page.tsx
@@ -0,0 +1,7 @@
+export default function communitypage() {
+    return (
+        <div>
+            社区
+        </div>
+    )
+}
diff --git a/app/(Nav)/message/layout.tsx b/app/(Nav)/message/layout.tsx
@@ -0,0 +1,52 @@
+'use client'
+import ThemeSwap from "@/components/ThemeSwap";
+import Link from "next/link";
+import { usePathname } from 'next/navigation'
+import { RiChat3Line, RiFileTextLine, RiImageLine, RiMusic2Line, RiNotification3Line, RiQuestionAnswerLine, RiShapesLine, RiTeamLine, RiVideoLine } from 'react-icons/ri'
+export default function Message({ children }) {
+  const pathname = usePathname();
+  return (
+    <div className='mx-auto max-w-4xl justify-center border-x-0 md:border-x'>
+
+
+
+      <div className="flex flex-row  w-full lg:w-full z-20 h-16 md:mt-16 items-center ">
+
+        {linknav.map((item) => (
+          <div className='mx-auto flex-col sm:flex-row w-1/3 justify-around flex hover:bg-[--link-hover-background]  z-20' key={item.href}>
+
+            <Link href={item.href} className={`z-20 flex items-center justify-center w-[100%] h-16 flex-col sm:flex-row  text-[#878787]  border-b ${pathname === item.href ? 'text-info  border-b-2 border-b-info' : ''}`}>
+              <div className=' justify-center text-2xl sm:text-2xl z-20'> {item.logo} </div>
+              <p className="text-sm text-inherit z-20 text-center">{item.name}</p>
+            </Link>
+
+          </div>
+        ))}
+
+      </div>
+
+
+
+      {children}
+    </div>
+  );
+}
+
+const linknav = [
+  {
+    href: "/message/chat",
+    name: "聊天",
+    logo: <RiQuestionAnswerLine />
+  },
+  {
+    href: "/message/community",
+    name: "社区",
+    logo: <RiTeamLine />
+  },
+  {
+    href: "/message/notice",
+    name: "通知",
+    logo: <RiNotification3Line />
+  },
+
+]
diff --git a/app/(Nav)/message/notice/page.tsx b/app/(Nav)/message/notice/page.tsx
@@ -0,0 +1,8 @@
+export default function noticepage() {
+    return (
+        <div>
+
+            通知
+        </div>
+    )
+}
diff --git a/app/(Nav)/message/page.jsx b/app/(Nav)/message/page.jsx
diff --git a/app/(Nav)/profile/page.tsx b/app/(Nav)/profile/page.tsx
@@ -2,7 +2,7 @@
 
 export default function page() {
    return (
-    <div className="mx-auto max-w-4xl  sm:mt-16 justify-center sm:border-x ">
+    <div className="mx-auto max-w-4xl  md:mt-16 justify-center sm:border-x ">
      profile
      </div>
    )

diff --git a/app/globals.css b/app/globals.css
@@ -10,6 +10,7 @@
   /* UI */
   --link-hover-background: rgba(0, 0, 0, 0.03) !important;
   --navlink-color: #545353d3 !important;
+  --navlink-active: #3f1de7, 
 }
 
 [data-theme='dark'] {
@@ -19,8 +20,9 @@
 
   /* UI hover */
   --link-hover-background: hsla(0, 0%, 100%, 0.04) !important;
-
   --navlink-color: #ece1e1d3 !important;
+  --navlink-active: #C0E218, 
+
 }
 
 body {}

diff --git a/app/login/LoginForm.tsx b/app/login/LoginForm.tsx
@@ -52,7 +52,7 @@ export default function LoginForm({ owner, onSuccess }: { owner: string; onSucce
           {profiles.map((profile, idx) => (
             <label
               key={profile.id}
-              className="w-full items-center p-4 rounded-lg cursor-pointer border transition-colors border-gray-300 hover:border-gray-500 grid grid-cols-[24px_auto]"
+              className=" btn btn-outline"
             >
               <input
                 disabled={isLoginPending}

diff --git a/app/login/WelcomeToLens.tsx b/app/login/WelcomeToLens.tsx
@@ -3,7 +3,7 @@
 import { SessionType, useSession } from "@lens-protocol/react-web";
 import { useAccount as useWagmiAccount } from "wagmi";
 import { config } from "@/config/Wagmi";
-
+import { useWeb3Modal } from '@web3modal/wagmi/react'
 import ConnectWalletButton from "@/app/login/ConnectWalletButton";
 import { DisconnectWalletButton } from "@/app/login/DisconnectWalletButton";
 import LoginForm from "@/app/login/LoginForm";
@@ -16,14 +16,16 @@ import ThemeSwap from "@/components/ThemeSwap";
 export function WelcomeToLens() {
     const { isConnected, address } = useWagmiAccount({ config });
     const { data } = useSession();
+    const { open, close } = useWeb3Modal()
 
     return (
         <div className=" flex justify-center items-center">
             <div className=" gap-14 w-dvw">
 
                 {!isConnected && (
-                    <div className="flex flex-col justify-center items-center">
-                        <p className="mb-4">连接您的钱包</p>
+                    <div className="flex flex-row justify-center items-center">
+{/*                         <p className="mb-4" onClick={()=>open({ view: 'Networks' })}>连接您的钱包</p> */}
+
                         <ConnectWalletButton />
                     </div>
                 )}
@@ -32,7 +34,7 @@ export function WelcomeToLens() {
                     <>
                         <p className="">当前连接的钱包: </p>
                         <div className="mt-2 mb-16 flex-row flex justify-between items-center">
-                            <button className='btn btn-primary'>{truncateEthAddress(address)}</button>
+                            <button className='btn btn-outline' onClick={()=>open({ view: 'Account' })} >{truncateEthAddress(address)}</button>
                             <DisconnectWalletButton />
                         </div>
 
@@ -43,7 +45,7 @@ export function WelcomeToLens() {
                     <>
                         <p className="">当前登入的Lens账号 </p>
                         <div className="mt-2  flex-row flex justify-between items-center">
-                            <button className='btn btn-primary font-semibold' >{data.profile.handle?.fullHandle ?? data.profile.id}
+                            <button className='btn btn-outline btn-primary font-semibold' >{data.profile.handle?.fullHandle ?? data.profile.id}
                             </button>
                             <LogoutButton />
                         </div>