style: reduce animation (#218)

* feat(eventCard): if no tags then dont show div * style(evantCard): remove org logo & reduce animation
FurryConsChina · Dec 25, 2024 · 32c582a · 32c582a
1 parent 641e3e6
commit 32c582a
Showing 1 changed file with 32 additions and 40 deletions.
diff --git a/src/components/eventCard/index.tsx b/src/components/eventCard/index.tsx
@@ -37,6 +37,23 @@ export default function EventCard({
     };
   }, []);
 
+  const tags = useMemo(() => {
+    const result = new Set<string>();
+    if (!event) return [];
+    if (event.features?.self) {
+      event.features.self.forEach((f) => {
+        result.add(f);
+      });
+    }
+    if (event.commonFeatures) {
+      event.commonFeatures.forEach((f) => {
+        result.add(f.name);
+      });
+    }
+
+    return Array.from(result);
+  }, [event]);
+
   return (
     <Link
       href={`/${event.organization?.slug}/${event.slug}`}
@@ -59,26 +76,15 @@ export default function EventCard({
           })
         }
         className={clsx(
-          "bg-white rounded-xl h-48 md:h-[300px] relative group md:outline md:outline-[5px] outline-white transition-all duration-300 drop-shadow-sm hover:shadow-2xl hover:-translate-y-2 overflow-hidden",
-          "hover:outline-red-400"
+          "bg-white rounded-xl h-48 md:h-[384px] relative group md:outline md:outline-[5px] outline-white transition-all duration-300 drop-shadow-sm hover:shadow-2xl hover:-translate-y-2 overflow-hidden",
+          "hover:outline-red-400 hover:scale-105"
         )}
       >
         <div
           className={clsx(
             "flex md:flex-col justify-between md:justify-end h-full rounded-xl relative"
           )}
         >
-          <div
-            className={clsx(
-              "hidden md:block md:absolute z-20 right-0 top-0 md:mt-2 md:mr-2"
-            )}
-          >
-            <OrganizationPill
-              logoUrl={event.organization.logoUrl}
-              organizationName={event.organization.name}
-            />
-          </div>
-
           <EventCover
             imageUrl={finalEventCoverImage}
             eventName={event.name}
@@ -91,8 +97,9 @@ export default function EventCard({
           <div
             className={clsx(
               "w-1/2",
-              "md:w-full md:h-2/5 group-hover:md:h-[90%]",
-              "p-2 md:p-4 transition-all duration-300 rounded-r-xl md:rounded-xl z-10 bg-white/90 group-hover:md:bg-white/60",
+              "md:w-full md:h-2/5",
+              tags.length && "group-hover:md:h-[50%]",
+              "p-2 md:p-4 transition-all duration-300 rounded-r-xl md:rounded-xl z-10 bg-white/90 group-hover:md:bg-white",
               styles.eventCardDescContainer
             )}
           >
@@ -103,7 +110,7 @@ export default function EventCard({
               {event.addressExtra?.city} {event.organization.name}
             </h5>
 
-            <h4 className="font-bold text-lg md:text-xl text-slate-800 group-hover:text-red-400 transition-colors duration-300 leading-5 truncate group-hover:text-clip group-hover:whitespace-normal">
+            <h4 className="font-bold text-lg md:text-xl text-slate-800 group-hover:text-red-400 transition-colors duration-75 leading-5 truncate group-hover:text-clip group-hover:whitespace-normal">
               {event.name}
             </h4>
 
@@ -132,9 +139,11 @@ export default function EventCard({
               <EventAddress event={event} />
             </div>
 
-            <div className="mt-4 md:hidden group-hover:block">
-              <Tags event={event} />
-            </div>
+            {!!tags.length && (
+              <div className="mt-4 hidden group-hover:block">
+                <Tags tags={tags} />
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -153,7 +162,7 @@ function OrganizationPill({
   return (
     <div className="flex justify-between items-center rounded-full w-fit">
       {logoUrl && (
-        <div className="hidden md:block border-2 rounded-full border-white group-hover:animate-spin">
+        <div className="hidden md:block border-2 rounded-full border-white">
           <Image
             src={logoUrl}
             alt={`${organizationName}的展会标志`}
@@ -190,9 +199,9 @@ function EventCover({
   return (
     <div
       className={clsx(
-        "relative w-1/2 flex-grow-0 flex items-center justify-center",
+        "relative md:absolute top-0 left-0 w-1/2 flex-grow-0 flex items-center justify-center",
         "md:w-full md:h-3/5",
-        "group-hover:brightness-50 transition-all duration-300"
+        "group-hover:scale-150 transition-all duration-300"
       )}
     >
       <div className="relative flex items-center justify-center z-10 h-full md:w-full">
@@ -316,24 +325,7 @@ function EventAddress({ event }: { event: EventType }) {
   );
 }
 
-function Tags({ event }: { event: EventType }) {
-  const tags = useMemo(() => {
-    const result = new Set<string>();
-    if (!event) return [];
-    if (event.features?.self) {
-      event.features.self.forEach((f) => {
-        result.add(f);
-      });
-    }
-    if (event.commonFeatures) {
-      event.commonFeatures.forEach((f) => {
-        result.add(f.name);
-      });
-    }
-
-    return Array.from(result);
-  }, [event]);
-
+function Tags({ tags }: { tags: string[] }) {
   return (
     <div className="flex flex-wrap gap-1">
       {tags.map((t) => (