fix SlopMeter (#93)

* fix SlopMeter * center div * why does prettier get checking in linting * fix light mode text * fixed homies
Hacksore · Aug 25, 2024 · 3166352 · 3166352
1 parent efefe74
commit 3166352
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 62 deletions.
diff --git a/src/app/component/MobileCard.tsx b/src/app/component/MobileCard.tsx
@@ -1,7 +1,7 @@
 import { ProductPost } from "../types";
 import { Pill } from "./Pill";
 
-export const MobileCard = ({ post }: { post: ProductPost }) => {
+export const MobileCard = ({ post, homie = false }: { post: ProductPost; homie?: boolean }) => {
   const link = new URL(post.url);
   return (
     <a
@@ -22,12 +22,14 @@ export const MobileCard = ({ post }: { post: ProductPost }) => {
           </h2>
         </div>
 
-        <p className="max-w-[69ch] text-sm opacity-60 md:text-base">{post.tagline}</p>
+        <p className="line-clamp-2 max-w-[69ch] text-sm opacity-60 md:text-base">{post.tagline}</p>
         <div className="flex flex-wrap gap-2">
           {post.topics &&
             post.topics.map(({ id, name }) => <Pill key={`${id}${post.id}`} name={name} />)}
         </div>
-        <p className="line-clamp-3 max-w-[69ch] text-sm md:text-base">{post.description}</p>
+        <p className="line-clamp-3 max-w-[69ch] text-left text-sm md:text-base">
+          {post.description}
+        </p>
       </div>
     </a>
   );

diff --git a/src/app/component/SlopMeter.tsx b/src/app/component/SlopMeter.tsx
@@ -71,43 +71,14 @@ export const SlopMeter: React.FC<RatioBarProps> = ({ propA, propB, nameA, nameB,
 
     const barGroup = svg.append("g").attr("transform", "translate(0, 0)");
 
-    const tooltip = d3
-      .select("body")
-      .append("div")
-      .style("pointer-events", "none")
-      .style("opacity", 0)
-      .classed(
-        "absolute border border-[#434343] rounded p-1.5 bg-neutral-200 dark:border-neutral-200 dark:bg-[#111111]",
-        true,
-      );
-
-    const showTooltip = (event: MouseEvent, content: string) => {
-      tooltip
-        .html(content)
-        .style("left", `${event.pageX + 10}px`)
-        .style("top", `${event.pageY + 10}px`)
-        .style("opacity", 1);
-    };
-
-    const hideTooltip = () => {
-      tooltip.style("opacity", 0);
-    };
-
     // Bar A (Bar on the left side)
     barGroup
       .append("rect")
       .attr("x", 0)
       .attr("y", 0)
       .attr("width", containerWidth * ratioA)
       .attr("height", height)
-      .attr("fill", "url(#gradientA)")
-      .on("mouseover", (event: MouseEvent) =>
-        showTooltip(event, `${nameA}: ${propA} (${(ratioA * 100).toFixed(2)}%)`),
-      )
-      .on("mousemove", (event: MouseEvent) =>
-        showTooltip(event, `${nameA}: ${propA} (${(ratioA * 100).toFixed(2)}%)`),
-      )
-      .on("mouseout", hideTooltip);
+      .attr("fill", "url(#gradientA)");
 
     // Bar B (Bar on the right side)
     barGroup
@@ -116,14 +87,7 @@ export const SlopMeter: React.FC<RatioBarProps> = ({ propA, propB, nameA, nameB,
       .attr("y", 0)
       .attr("width", containerWidth * ratioB)
       .attr("height", height)
-      .classed("dark:fill-[#171717] fill-neutral-200", true)
-      .on("mouseover", (event) =>
-        showTooltip(event, `${nameB}: ${propB} (${(ratioB * 100).toFixed(2)}%)`),
-      )
-      .on("mousemove", (event) =>
-        showTooltip(event, `${nameB}: ${propB} (${(ratioB * 100).toFixed(2)}%)`),
-      )
-      .on("mouseout", hideTooltip);
+      .classed("dark:fill-[#171717] fill-neutral-200", true);
 
     // Text A (Label on the left side)
     svg
@@ -133,10 +97,6 @@ export const SlopMeter: React.FC<RatioBarProps> = ({ propA, propB, nameA, nameB,
       .attr("text-anchor", "start")
       .attr("fill", "black")
       .style("font-weight", "bold")
-      .style(
-        "text-shadow",
-        "1px 1px 0px #fda4af, -1px -1px 0px #fda4af, 1px -1px 0px #fda4af, -1px 1px 0px #fda4af",
-      )
       .text(nameA + " • " + formatNumber(propA));
 
     // Text B (Label on the right side)
@@ -145,18 +105,13 @@ export const SlopMeter: React.FC<RatioBarProps> = ({ propA, propB, nameA, nameB,
       .attr("x", containerWidth - 8)
       .attr("y", height / 2 + 5)
       .attr("text-anchor", "end")
-      .style(
-        "text-shadow",
-        "1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px 1px 0px black",
-      )
       .classed("font-bold dark:fill-neutral-200 fill-black", true)
       .text(formatNumber(propB) + " • " + nameB);
-
-    // Clean up the tooltip on component unmount
-    return () => {
-      tooltip.remove();
-    };
   }, [containerWidth, propA, propB, nameA, nameB, height]);
 
-  return <svg ref={svgRef} style={{ width: "100%" }}></svg>;
+  return (
+    <div className="overflow-hidden rounded-lg">
+      <svg ref={svgRef} style={{ width: "100%" }} />
+    </div>
+  );
 };
diff --git a/src/app/homies/page.tsx b/src/app/homies/page.tsx
@@ -1,4 +1,5 @@
 import { Card } from "../component/Card";
+import { MobileCard } from "../component/MobileCard";
 import { PROJECTS } from "../projects";
 
 export default function Component() {
@@ -9,9 +10,21 @@ export default function Component() {
       </a>
       <h1 className="text-primary pb-8 text-6xl font-extrabold">The Homies Projects</h1>
 
-      {PROJECTS.map((item, idx) => (
-        <Card key={`card-${item.name}`} homie index={idx} post={item} />
-      ))}
+      <div className="flex flex-col gap-4 overflow-hidden px-2 md:gap-8">
+        {PROJECTS.map((item, idx) => (
+          <>
+            {idx !== 0 && (
+              <div className="flex h-0.5 w-full bg-neutral-200 md:hidden dark:bg-neutral-800" />
+            )}
+            <div className="hidden md:flex">
+              <Card key={`card-${item.name}`} homie index={idx} post={item} />
+            </div>
+            <div className="md:hidden">
+              <MobileCard key={`card-${item.name}`} homie post={item} />
+            </div>
+          </>
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -46,17 +46,23 @@ export default async function Page() {
         <h1 className="mb-4 bg-gradient-to-r from-pink-400 to-orange-400 bg-clip-text text-4xl font-bold text-transparent md:text-5xl dark:from-pink-300 dark:to-orange-300">
           Product Hunt with ZERO AI Slop™
         </h1>
+
         <a
-          className="fancy"
           href="https://github.com/Hacksore/oghunt"
           target="_blank"
           rel="noopener noreferrer"
+          className="relative mx-auto h-[50px] w-[300px] max-w-full overflow-hidden rounded-[50px] bg-current text-center text-white dark:bg-black"
         >
-          <div>✨ Star on Github</div>
+          <div className="absolute inset-0 z-10 flex items-center justify-center text-[1.25rem] font-bold text-black dark:text-white">
+            ✨ Star on Github
+          </div>
+          <div className="absolute left-1/2 top-1/2 aspect-square w-full -translate-x-1/2 -translate-y-1/2 animate-[rotate_2s_linear_infinite] bg-[conic-gradient(at_top,#fda4af_0%_25%,#fb923c_75%_100%)]"></div>
+          <div className="absolute inset-[2px] h-[calc(100%-4px)] w-[calc(100%-4px)] rounded-[inherit] bg-[inherit]"></div>
         </a>
+
         <div className="w-full">
           <h2 className="text-mg pb-2 font-bold md:text-lg">SlopMeter™</h2>
-          <div className="mx-auto w-full overflow-hidden rounded-lg">
+          <div className="mx-auto w-full">
             <SlopMeter
               propA={aiPosts.length}
               propB={posts.length}
@@ -69,7 +75,7 @@ export default async function Page() {
 
         <div className="w-full">
           <h2 className="text-mg pb-2 font-bold md:text-lg">AI HypeMeter™</h2>
-          <div className="mx-auto w-full overflow-hidden rounded-lg">
+          <div className="mx-auto w-full">
             <SlopMeter
               propA={aiVotes}
               propB={nonAIVotes}