feat(tools): add frontend mock pages for AI tools directory

packages/shared/src/components/tools/ToolBreadcrumb.tsx

@@ -0,0 +1,73 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import Link from '../utilities/Link';
+import type { Tool } from '../../lib/toolsMockData';
+import { AiIcon, HomeIcon } from '../icons';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+
+export interface ToolBreadcrumbProps {
+  toolPath: Tool[];
+  className?: string;
+}
+
+export const ToolBreadcrumb = ({
+  toolPath,
+  className,
+}: ToolBreadcrumbProps): ReactElement => {
+  return (
+    <nav
+      aria-label="breadcrumbs"
+      className={classNames(
+        'hidden h-10 items-center gap-0.5 px-1.5 text-surface-secondary laptop:flex',
+        className,
+      )}
+    >
+      <ol className="flex flex-1 items-center gap-0.5">
+        <li className="flex items-center gap-0.5">
+          <Button
+            variant={ButtonVariant.Tertiary}
+            icon={<HomeIcon secondary />}
+            tag="a"
+            href={process.env.NEXT_PUBLIC_WEBAPP_URL}
+            size={ButtonSize.XSmall}
+          />
+          <span aria-hidden>/</span>
+        </li>
+        <li className="flex items-center gap-0.5">
+          <Link href="/tools" passHref>
+            <a className="flex items-center gap-1 rounded-8 px-2 py-1 text-text-tertiary typo-callout hover:bg-surface-hover hover:text-text-primary">
+              <AiIcon className="size-4" />
+              <span>Tools</span>
+            </a>
+          </Link>
+          {toolPath.length > 0 && <span aria-hidden>/</span>}
+        </li>
+        {toolPath.map((tool, index) => {
+          const isLast = index === toolPath.length - 1;
+          return (
+            <li key={tool.id} className="flex items-center gap-0.5">
+              {isLast ? (
+                <span
+                  className="px-2 py-1 font-bold text-text-primary typo-callout"
+                  aria-current="page"
+                >
+                  {tool.name}
+                </span>
+              ) : (
+                <>
+                  <Link href={`/tools/${tool.slug}`} passHref>
+                    <a className="rounded-8 px-2 py-1 text-text-tertiary typo-callout hover:bg-surface-hover hover:text-text-primary">
+                      {tool.name}
+                    </a>
+                  </Link>
+                  <span aria-hidden>/</span>
+                </>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};

packages/shared/src/components/tools/ToolCard.tsx

@@ -0,0 +1,56 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import Link from '../utilities/Link';
+import type { Tool } from '../../lib/toolsMockData';
+import { Image } from '../image/Image';
+import { UpvoteIcon } from '../icons';
+import { largeNumberFormat } from '../../lib';
+
+export interface ToolCardProps {
+  tool: Tool;
+  className?: string;
+}
+
+export const ToolCard = ({ tool, className }: ToolCardProps): ReactElement => {
+  const hasChildren = tool.children.length > 0;
+
+  return (
+    <Link href={`/tools/${tool.slug}`} passHref>
+      <a
+        className={classNames(
+          'flex flex-col rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4 transition-colors hover:border-border-subtlest-secondary',
+          className,
+        )}
+      >
+        <div className="flex items-start gap-3">
+          <Image
+            className="size-12 rounded-12 object-cover"
+            src={tool.image}
+            alt={`${tool.name} logo`}
+          />
+          <div className="min-w-0 flex-1">
+            <h3 className="truncate font-bold text-text-primary typo-title3">
+              {tool.name}
+            </h3>
+            <div className="mt-1 flex items-center gap-2 text-text-tertiary typo-footnote">
+              <span className="flex items-center gap-1">
+                <UpvoteIcon className="size-4" />
+                {largeNumberFormat(tool.upvotes)}
+              </span>
+              {hasChildren && (
+                <>
+                  <span aria-hidden>·</span>
+                  <span>{tool.children.length} tools</span>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+        <p className="mt-3 line-clamp-2 text-text-secondary typo-callout">
+          {tool.description}
+        </p>
+      </a>
+    </Link>
+  );
+};

packages/shared/src/components/tools/ToolDiscussion.tsx

@@ -0,0 +1,110 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { MockComment } from '../../lib/toolsMockData';
+import { Image } from '../image/Image';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  ButtonColor,
+} from '../buttons/Button';
+import { UpvoteIcon } from '../icons';
+import { largeNumberFormat } from '../../lib';
+
+export interface ToolDiscussionProps {
+  comments: MockComment[];
+  upvotedComments: Set<string>;
+  onUpvoteComment: (commentId: string) => void;
+  className?: string;
+}
+
+const formatTimestamp = (timestamp: string): string => {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) {
+    return 'Today';
+  }
+  if (diffDays === 1) {
+    return 'Yesterday';
+  }
+  if (diffDays < 7) {
+    return `${diffDays} days ago`;
+  }
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+  });
+};
+
+export const ToolDiscussion = ({
+  comments,
+  upvotedComments,
+  onUpvoteComment,
+  className,
+}: ToolDiscussionProps): ReactElement => {
+  return (
+    <div className={classNames('flex flex-col', className)}>
+      <h2 className="mb-4 font-bold text-text-primary typo-title3">
+        Discussion
+      </h2>
+      <div className="mb-4 rounded-12 border border-border-subtlest-tertiary bg-surface-float p-3">
+        <textarea
+          className="w-full resize-none bg-transparent text-text-primary typo-body placeholder:text-text-quaternary focus:outline-none"
+          placeholder="Share your thoughts about this tool..."
+          rows={3}
+        />
+        <div className="mt-2 flex justify-end">
+          <Button variant={ButtonVariant.Primary} size={ButtonSize.Small}>
+            Post comment
+          </Button>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
+        {comments.map((comment) => {
+          const isUpvoted = upvotedComments.has(comment.id);
+          return (
+            <article
+              key={comment.id}
+              className="flex gap-3 rounded-12 border border-border-subtlest-tertiary bg-surface-float p-4"
+            >
+              <Image
+                className="size-10 rounded-full object-cover"
+                src={comment.avatar}
+                alt={`${comment.username}'s avatar`}
+              />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-bold text-text-primary typo-callout">
+                    {comment.username}
+                  </span>
+                  <span className="text-text-quaternary typo-footnote">
+                    {formatTimestamp(comment.timestamp)}
+                  </span>
+                </div>
+                <p className="mt-2 text-text-secondary typo-body">
+                  {comment.content}
+                </p>
+                <div className="mt-3">
+                  <Button
+                    variant={ButtonVariant.Tertiary}
+                    color={isUpvoted ? ButtonColor.Avocado : undefined}
+                    size={ButtonSize.XSmall}
+                    pressed={isUpvoted}
+                    onClick={() => onUpvoteComment(comment.id)}
+                    icon={<UpvoteIcon secondary={isUpvoted} />}
+                  >
+                    {largeNumberFormat(comment.upvotes + (isUpvoted ? 1 : 0))}
+                  </Button>
+                </div>
+              </div>
+            </article>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

packages/shared/src/components/tools/ToolHeader.tsx

@@ -0,0 +1,59 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { Tool } from '../../lib/toolsMockData';
+import { Image } from '../image/Image';
+import { Button, ButtonVariant, ButtonColor } from '../buttons/Button';
+import { UpvoteIcon } from '../icons';
+import { largeNumberFormat } from '../../lib';
+
+export interface ToolHeaderProps {
+  tool: Tool;
+  isUpvoted: boolean;
+  onUpvote: () => void;
+  className?: string;
+}
+
+export const ToolHeader = ({
+  tool,
+  isUpvoted,
+  onUpvote,
+  className,
+}: ToolHeaderProps): ReactElement => {
+  return (
+    <div className={classNames('flex flex-col', className)}>
+      <div className="flex items-start gap-4">
+        <Image
+          className="size-16 rounded-16 object-cover laptop:size-20"
+          src={tool.image}
+          alt={`${tool.name} logo`}
+        />
+        <div className="min-w-0 flex-1">
+          <h1 className="font-bold text-text-primary typo-title1">
+            {tool.name}
+          </h1>
+          <p className="mt-2 text-text-secondary typo-body">
+            {tool.description}
+          </p>
+        </div>
+      </div>
+      <div className="mt-4 flex items-center gap-4">
+        <Button
+          variant={ButtonVariant.Secondary}
+          color={isUpvoted ? ButtonColor.Avocado : undefined}
+          pressed={isUpvoted}
+          onClick={onUpvote}
+          icon={<UpvoteIcon secondary={isUpvoted} />}
+        >
+          {largeNumberFormat(tool.upvotes + (isUpvoted ? 1 : 0))}
+        </Button>
+        <span className="text-text-tertiary typo-callout">
+          {tool.relatedPosts.length} related posts
+        </span>
+        <span className="text-text-tertiary typo-callout">
+          {tool.comments.length} discussions
+        </span>
+      </div>
+    </div>
+  );
+};

packages/shared/src/components/tools/ToolRelatedContent.tsx

@@ -0,0 +1,49 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { MockPost } from '../../lib/toolsMockData';
+import { UpvoteIcon, DiscussIcon } from '../icons';
+import { largeNumberFormat } from '../../lib';
+
+export interface ToolRelatedContentProps {
+  posts: MockPost[];
+  className?: string;
+}
+
+export const ToolRelatedContent = ({
+  posts,
+  className,
+}: ToolRelatedContentProps): ReactElement => {
+  return (
+    <div className={classNames('flex flex-col', className)}>
+      <h2 className="mb-4 font-bold text-text-primary typo-title3">
+        Related posts
+      </h2>
+      <div className="flex flex-col gap-3">
+        {posts.map((post) => (
+          <article
+            key={post.id}
+            className="flex flex-col gap-2 rounded-12 border border-border-subtlest-tertiary bg-surface-float p-4"
+          >
+            <h3 className="font-bold text-text-primary typo-callout">
+              {post.title}
+            </h3>
+            <div className="flex items-center gap-3 text-text-tertiary typo-footnote">
+              <span>{post.source}</span>
+              <span aria-hidden>·</span>
+              <span>{post.date}</span>
+              <span className="flex items-center gap-1">
+                <UpvoteIcon className="size-3" />
+                {largeNumberFormat(post.upvotes)}
+              </span>
+              <span className="flex items-center gap-1">
+                <DiscussIcon className="size-3" />
+                {largeNumberFormat(post.comments)}
+              </span>
+            </div>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+};