style: tweak the style of the card list

petercat-ai · Aug 21, 2024 · ab61dc4 · ab61dc4
1 parent 4964aee
commit ab61dc4
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 34 deletions.
diff --git a/client/app/factory/list/components/AddBotCard.tsx b/client/app/factory/list/components/AddBotCard.tsx
@@ -1,22 +1,19 @@
 'use client';
-import { Tables } from '@/types/database.types';
 import React from 'react';
-import { Card, Image, CardBody, CardFooter } from '@nextui-org/react';
+import { Card, CardBody } from '@nextui-org/react';
 import { useRouter } from 'next/navigation';
-import { AddBotIcon } from "@/public/icons/AddBotIcon";
-
-declare type Bot = Tables<'bots'>;
+import { AddBotIcon } from '@/public/icons/AddBotIcon';
 
 const BotCard = () => {
   const router = useRouter();
 
   return (
     <Card
-      className="border-none w-full max-h-[400px] bg-[#FFF] rounded-[16px] p-2 h-[384px]"
+      className="border-none w-full max-h-[400px] bg-[#FFF] rounded-[16px] p-2 h-[384px] rounded-[8px]"
       isPressable
       onClick={() => router.push(`/factory/edit/new`)}
     >
-      <CardBody className="overflow-visible p-0 bg-[#F3F4F6] h-[400px] flex justify-center items-center">
+      <CardBody className="overflow-visible p-0 bg-gradient-to-b from-[rgba(255,255,255,0.65)] to-white bg-[#F3F4F6] h-[400px] flex justify-center items-center rounded-[8px]">
         <AddBotIcon />
       </CardBody>
     </Card>

diff --git a/client/app/factory/list/components/BotCard.tsx b/client/app/factory/list/components/BotCard.tsx
@@ -78,10 +78,10 @@ const BotCard = (props: { bot: Bot }) => {
       >
         <CardBody className="overflow-visible flex-initial p-0 flex-1">
           <div
-            className="relative overflow-hidden w-full h-full bg-cover bg-center"
+            className="relative overflow-hidden w-full h-full bg-cover bg-center rounded-[8px]"
             style={{ backgroundImage: `url(${bot.avatar})` }}
           >
-            <div className="absolute inset-0 bg-white bg-opacity-50 backdrop-blur-[70px]"></div>
+            <div className="absolute inset-0 bg-white bg-opacity-70 backdrop-blur-[70px] rounded-[8px]"></div>
             <div className="flex justify-center items-center h-full">
               <Image
                 shadow="none"

diff --git a/client/components/AddBotCard.tsx b/client/components/AddBotCard.tsx
@@ -1,18 +1,18 @@
 'use client';
 import React from 'react';
 import { Card, CardBody } from '@nextui-org/react';
-import { AddBotIcon } from "@/public/icons/AddBotIcon";
-const BotCard = (props: {onPress: Function}) => {
+import { AddBotIcon } from '@/public/icons/AddBotIcon';
+const BotCard = (props: { onPress: Function }) => {
   return (
     <Card
-      className="border-none w-full max-h-[400px] bg-[#FFF] rounded-[16px] p-2 h-[384px]"
+      className="border-none w-full max-h-[400px] bg-[#FFF] rounded-[16px] p-2 h-[384px] rounded-[8px]"
       shadow="none"
       isPressable
       onPress={() => {
         props.onPress();
       }}
     >
-      <CardBody className="overflow-visible p-0 bg-gradient-to-b from-[rgba(255,255,255,0.65)] to-white bg-[#F3F4F6] h-[400px] flex justify-center items-center">
+      <CardBody className="overflow-visible p-0 bg-gradient-to-b from-[rgba(255,255,255,0.65)] to-white bg-[#F3F4F6] h-[400px] flex justify-center items-center rounded-[8px]">
         <AddBotIcon className="" />
       </CardBody>
     </Card>

diff --git a/client/components/BotCard.tsx b/client/components/BotCard.tsx
@@ -24,10 +24,10 @@ const BotCard = (props: {
     >
       <CardBody className="overflow-visible flex-initial p-0 flex-1">
         <div
-          className="relative overflow-hidden w-full h-full bg-cover bg-center"
+          className="relative overflow-hidden w-full h-full bg-cover bg-center rounded-[8px]"
           style={{ backgroundImage: `url(${bot.avatar})` }}
         >
-          <div className="absolute inset-0 bg-white bg-opacity-50 backdrop-blur-[70px]"></div>
+          <div className="absolute inset-0 bg-white bg-opacity-70 backdrop-blur-[70px] rounded-[8px]"></div>
           <div className="flex justify-center items-center h-full">
             <Image
               shadow="none"

diff --git a/client/components/Navbar.tsx b/client/components/Navbar.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
-import { Image, Link, Tabs, Tab, Input, Button } from '@nextui-org/react';
+import { Link, Tabs, Tab, Input, Button } from '@nextui-org/react';
 import { usePathname } from 'next/navigation';
 import Profile from './User';
 import { ShopIcon } from '@/public/icons/ShopIcon';
@@ -56,12 +56,7 @@ export function Navbar() {
     <div className="flex bg-[#F3F4F6] py-[20px] px-[24px] min-w-[900px] mb-[16px]">
       <div className="w-[320px] flex mr-[0px]">
         <Link href="/">
-          <Image
-            src="/images/logo.svg"
-            alt="petercat"
-            width={115}
-            height={32}
-          />
+          <img src="/images/logo.svg" alt="petercat" width={115} height={32} />
         </Link>
         <Tabs
           items={navs}
@@ -98,7 +93,7 @@ export function Navbar() {
           radius="lg"
           onKeyDown={handleKeyDown}
           onClear={handleClear}
-          placeholder="请输入卡片名称" 
+          placeholder="请输入卡片名称"
           classNames={{
             input: ['bg-transparent', 'h-10'],
             inputWrapper: [
@@ -118,18 +113,18 @@ export function Navbar() {
         />
       </div>
       <div className="w-[200px] ml-[48px] flex items-center">
-          {!pathname.includes('/factory/list') && <BotList type="nav" />}
-          {pathname.includes('/factory/list') && (
-            <Button
-              onPress={() => router.push(`/factory/edit/new`)}
-              className="bg-[#3F3F46] text-[#FFFFFF] rounded-full px-4 py-2 mr-[16px]"
-              startContent={<AddIcon />}
-            >
-              创建机器人
-            </Button>
-          )}
+        {!pathname.includes('/factory/list') && <BotList type="nav" />}
+        {pathname.includes('/factory/list') && (
+          <Button
+            onPress={() => router.push(`/factory/edit/new`)}
+            className="bg-[#3F3F46] text-[#FFFFFF] rounded-full px-4 py-2 mr-[16px]"
+            startContent={<AddIcon />}
+          >
+            创建机器人
+          </Button>
+        )}
 
-          <Profile />
+        <Profile />
       </div>
     </div>
   );