diff --git a/apps/namegraph.dev/components/mini-apps/explore-collections/suggestion-category.tsx b/apps/namegraph.dev/components/mini-apps/explore-collections/suggestion-category.tsx
index edef796af..06471019d 100644
--- a/apps/namegraph.dev/components/mini-apps/explore-collections/suggestion-category.tsx
+++ b/apps/namegraph.dev/components/mini-apps/explore-collections/suggestion-category.tsx
@@ -10,6 +10,7 @@ import {
import { RecursiveRelatedCollectionPills } from "./recursive-related-collection-pills";
import { SuggestionCategoryHeader } from "./suggestion-category-header";
import Skeleton from "@/components/skeleton";
+import { getRandomColor } from "@/lib/utils";
interface SuggestionCategoryProps {
category: NameGraphFetchTopCollectionMembersResponse;
@@ -117,28 +118,10 @@ export const SuggestionCategory = ({ category }: SuggestionCategoryProps) => {
};
}, []);
- const customizedPillsColors = [
- "#E7DBF7",
- "#1FA3C7",
- "#FE097C",
- "#FFBE00",
- "#DB3D58",
- "#01C69A",
- "#8464CA",
- "#E84233",
- "#F5851E",
- "#CBECEC",
- "#FDE2CB",
- "#F0C3F3",
- ];
-
const getRandomCustomizedPill = () => {
const defaultClasses = "rounded-xl px-2.5 py-1 bg-opacity-70";
- const randomColor =
- customizedPillsColors[
- Math.floor(Math.random() * customizedPillsColors.length)
- ];
+ const randomColor = getRandomColor();
return `bg-[${randomColor}] ${defaultClasses}`;
};
diff --git a/apps/namegraph.dev/components/mini-apps/ideate/catalog.tsx b/apps/namegraph.dev/components/mini-apps/ideate/catalog.tsx
index 909cee84f..aae76f9cd 100644
--- a/apps/namegraph.dev/components/mini-apps/ideate/catalog.tsx
+++ b/apps/namegraph.dev/components/mini-apps/ideate/catalog.tsx
@@ -37,7 +37,7 @@ export function Catalog({ onJsonChange }: CatalogProps) {
return (
-
Writer's Block Catalog
+
A custom catalog
📖 By modifying the below text you
- can customize the catalog of name
-
collections you want to ideate around 🌏
+ can customize the catalog you want to ideate around
diff --git a/apps/namegraph.dev/components/ui/card.tsx b/apps/namegraph.dev/components/ui/card.tsx
new file mode 100644
index 000000000..be021b080
--- /dev/null
+++ b/apps/namegraph.dev/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/apps/namegraph.dev/components/ui/chart.tsx b/apps/namegraph.dev/components/ui/chart.tsx
new file mode 100644
index 000000000..5b6bae8c1
--- /dev/null
+++ b/apps/namegraph.dev/components/ui/chart.tsx
@@ -0,0 +1,365 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+ [k in string]: {
+ label?: React.ReactNode;
+ icon?: React.ComponentType;
+ } & (
+ | { color?: string; theme?: never }
+ | { color?: never; theme: Record }
+ );
+};
+
+type ChartContextProps = {
+ config: ChartConfig;
+};
+
+const ChartContext = React.createContext(null);
+
+function useChart() {
+ const context = React.useContext(ChartContext);
+
+ if (!context) {
+ throw new Error("useChart must be used within a ");
+ }
+
+ return context;
+}
+
+const ChartContainer = React.forwardRef<
+ HTMLDivElement,
+ React.ComponentProps<"div"> & {
+ config: ChartConfig;
+ children: React.ComponentProps<
+ typeof RechartsPrimitive.ResponsiveContainer
+ >["children"];
+ }
+>(({ id, className, children, config, ...props }, ref) => {
+ const uniqueId = React.useId();
+ const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+ return (
+
+
+
+
+ {children}
+
+
+
+ );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+ const colorConfig = Object.entries(config).filter(
+ ([, config]) => config.theme || config.color,
+ );
+
+ if (!colorConfig.length) {
+ return null;
+ }
+
+ return (
+