@sanvika/ui 0.1.0

package/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@sanvika/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "private": false,
+  "description": "Sanvika Production — shared UI component library for 50+ projects. Pure JS, CSS Modules, props-driven.",
+  "author": "Shyam Bharteey <shyam@sanvikaproduction.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sanvika/sanvika-ui"
+  },
+  "keywords": ["react", "ui", "components", "design-system", "sanvika", "classified-ads"],
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./icons": "./src/components/icons/index.js",
+    "./styles": "./src/styles/index.css"
+  },
+  "files": [
+    "src/components",
+    "src/context",
+    "src/styles",
+    "src/index.js",
+    "!src/**/*.stories.jsx",
+    "!src/**/*.stories.js"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "echo 'Publishing @sanvika/ui...'"
+  },
+  "dependencies": {},
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "core-js-pure",
+      "esbuild"
+    ]
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/nextjs": "^10.3.2",
+    "babel-plugin-react-compiler": "1.0.0",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.2",
+    "next": "16.2.2",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "storybook": "^10.3.2"
+  }
+}

package/src/components/buttons/Button.jsx

@@ -0,0 +1,96 @@
+// src/components/buttons/Button.jsx
+import React from "react";
+import styles from "@/styles/components/buttons/Button.module.css";
+
+/**
+ * Button — versatile button/link component.
+ *
+ * @param {object} props
+ * @param {React.ReactNode} [props.children]
+ * @param {string} [props.text]           - button label (fallback if no children)
+ * @param {React.ReactNode} [props.icon]  - icon rendered before label
+ * @param {React.ReactNode} [props.badge] - notification badge
+ * @param {"primary"|"secondary"|"danger"|"success"} [props.intent="primary"]
+ * @param {"solid"|"outline"|"ghost"} [props.appearance="solid"]
+ * @param {"sm"|"md"|"lg"} [props.size="md"]
+ * @param {boolean} [props.fullWidth=false]
+ * @param {string} [props.href]           - renders as <a> when set
+ * @param {"button"|"submit"|"reset"} [props.type="button"]
+ * @param {boolean} [props.disabled=false]
+ */
+const Button = ({
+  children,
+  text,
+  icon,
+  badge,
+  intent = "primary",
+  appearance = "solid",
+  size = "md",
+  fullWidth = false,
+  href,
+  type = "button",
+  disabled = false,
+  className,
+  style,
+  onClick,
+  ...props
+}) => {
+  const label = children ?? text;
+
+  const intentClass = styles[intent] ?? styles.primary;
+
+  const appearanceClass =
+    appearance === "outline"
+      ? styles.outline
+      : appearance === "ghost"
+        ? styles.ghost
+        : "";
+
+  const sizeClass = size === "sm" ? styles.sm : size === "lg" ? styles.lg : "";
+
+  const cls = [
+    styles.button,
+    intentClass,
+    appearanceClass,
+    sizeClass,
+    fullWidth ? styles.full : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const content = (
+    <>
+      {icon && (
+        <span className={styles.icon} aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      {label && <span className={styles.text}>{label}</span>}
+      {badge != null && <span className={styles.badge}>{badge}</span>}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className={cls} style={style} {...props}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type={type}
+      className={cls}
+      style={style}
+      disabled={disabled}
+      onClick={onClick}
+      {...props}
+    >
+      {content}
+    </button>
+  );
+};
+
+export default Button;

package/src/components/buttons/FavoriteHeartButton.jsx

@@ -0,0 +1,41 @@
+// src/components/buttons/FavoriteHeartButton.jsx
+import React from "react";
+import HeartIcon from "@/components/icons/HeartIcon";
+import Button from "@/components/buttons/Button";
+import styles from "@/styles/components/buttons/FavoriteHeartButton.module.css";
+
+/**
+ * FavoriteHeartButton — toggleable heart/favorite button.
+ * Returns null when isOwner=true (owners cannot favorite their own items).
+ *
+ * @param {boolean} isFavorited - current favorite state
+ * @param {function} onClick
+ * @param {boolean} [disabled=false]
+ * @param {boolean} [isOwner=false] - if true, renders nothing
+ * @param {string} [className]
+ * @param {object} [style]
+ */
+const FavoriteHeartButton = ({
+  isFavorited,
+  onClick,
+  disabled,
+  isOwner = false,
+  className = "",
+  style,
+}) => {
+  if (isOwner) return null;
+
+  return (
+    <Button
+      onClick={onClick}
+      disabled={disabled}
+      className={`${styles.favoriteHeartButton} ${isFavorited ? styles.favorited : styles.notFavorited} ${className}`}
+      style={style}
+      aria-label={isFavorited ? "Unfavorite" : "Favorite"}
+      title={isFavorited ? "Unfavorite" : "Favorite"}
+      icon={<HeartIcon style={{ width: 20, height: 20 }} />}
+    />
+  );
+};
+
+export default FavoriteHeartButton;

package/src/components/buttons/ScrollButton.jsx

@@ -0,0 +1,36 @@
+// src/components/buttons/ScrollButton.jsx
+import React from "react";
+import Button from "@/components/buttons/Button";
+import { FaArrowUp, FaArrowDown } from "@/components/icons";
+
+/**
+ * ScrollButton — icon-only button for scroll up/down actions.
+ *
+ * @param {"up"|"down"} [direction="up"]
+ * @param {function} onClick
+ * @param {string} [className]
+ * @param {object} [style]
+ */
+const ScrollButton = ({
+  direction = "up",
+  onClick,
+  className = "",
+  style = {},
+}) => {
+  const icon = direction === "up" ? <FaArrowUp /> : <FaArrowDown />;
+  const label = direction === "up" ? "Scroll to top" : "Scroll to bottom";
+
+  return (
+    <Button
+      icon={icon}
+      onClick={onClick}
+      className={className}
+      appearance="ghost"
+      aria-label={label}
+      title={label}
+      style={{ display: "flex", ...style }}
+    />
+  );
+};
+
+export default ScrollButton;

package/src/components/buttons/ThreeDotButton.jsx

@@ -0,0 +1,36 @@
+// src/components/buttons/ThreeDotButton.jsx
+import React from "react";
+import Button from "@/components/buttons/Button";
+import styles from "@/styles/components/buttons/ThreeDotButton.module.css";
+
+/**
+ * ThreeDotButton — compact vertical three-dot menu trigger.
+ * Pure props-driven: all navigation/action logic passed via onClick.
+ *
+ * @param {function} [onClick]
+ * @param {string} [ariaLabel="More options"]
+ * @param {string} [className]
+ */
+const ThreeDotButton = ({
+  className = "",
+  ariaLabel = "More options",
+  onClick,
+}) => {
+  return (
+    <Button
+      className={`${styles.threeDotButton} ${className}`}
+      onClick={onClick}
+      aria-label={ariaLabel}
+      title={ariaLabel}
+      icon={
+        <span className={styles.dotsWrapper} aria-hidden="true">
+          <span className={styles.dot} />
+          <span className={styles.dot} />
+          <span className={styles.dot} />
+        </span>
+      }
+    />
+  );
+};
+
+export default ThreeDotButton;

package/src/components/common/Container.jsx

@@ -0,0 +1,38 @@
+// src/components/common/Container.jsx
+import styles from "@/styles/components/common/Container.module.css";
+
+/**
+ * Container — a centered max-width wrapper.
+ *
+ * @param {"default"|"narrow"|"wide"|"full"} [size="default"]
+ * @param {React.ElementType} [as="div"]
+ */
+const Container = ({
+  children,
+  size = "default",
+  className,
+  style,
+  as: Tag = "div",
+  ...props
+}) => {
+  const sizeClass =
+    size === "narrow"
+      ? styles.narrow
+      : size === "wide"
+        ? styles.wide
+        : size === "full"
+          ? styles.full
+          : "";
+
+  const cls = [styles.container, sizeClass, className ?? ""]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <Tag className={cls} style={style} {...props}>
+      {children}
+    </Tag>
+  );
+};
+
+export default Container;

package/src/components/common/Section.jsx

@@ -0,0 +1,60 @@
+// src/components/common/Section.jsx
+import styles from "@/styles/components/common/Section.module.css";
+import Container from "./Container";
+
+/**
+ * Section — a full-width page section with optional title/subtitle.
+ *
+ * @param {"default"|"alternate"|"card"} [variant="default"]
+ * @param {"default"|"tight"|"flush"} [padding="default"]
+ * @param {string} [title]
+ * @param {string} [subtitle]
+ * @param {"default"|"narrow"|"wide"|"full"} [containerSize="default"]
+ * @param {React.ElementType} [as="section"]
+ */
+const Section = ({
+  children,
+  variant = "default",
+  padding = "default",
+  title,
+  subtitle,
+  containerSize = "default",
+  className,
+  style,
+  as: Tag = "section",
+  ...props
+}) => {
+  const variantClass =
+    variant === "alternate"
+      ? styles.alternate
+      : variant === "card"
+        ? styles.card
+        : "";
+
+  const paddingClass =
+    padding === "tight"
+      ? styles.tight
+      : padding === "flush"
+        ? styles.flush
+        : "";
+
+  const cls = [styles.section, variantClass, paddingClass, className ?? ""]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <Tag className={cls} style={style} {...props}>
+      <Container size={containerSize}>
+        {(title || subtitle) && (
+          <div className={styles.header}>
+            {title && <h2 className={styles.title}>{title}</h2>}
+            {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
+          </div>
+        )}
+        {children}
+      </Container>
+    </Tag>
+  );
+};
+
+export default Section;

package/src/components/icons/BellIcon.jsx

@@ -0,0 +1,10 @@
+// src/components/icons/BellIcon.jsx
+import React from "react";
+
+export const BellIcon = ({ className, style, title = "Notifications" }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className={className} style={style} role="img">
+    <title>{title}</title>
+    <path d="M12 2a4 4 0 00-4 4v1.586L6.293 9.293A1 1 0 006 10v2l-1 1v1h14v-1l-1-1v-2a1 1 0 00-.293-.707L16 7.586V6a4 4 0 00-4-4zm0 18a2.5 2.5 0 01-2.45-2h4.9A2.5 2.5 0 0112 20z" />
+  </svg>
+);
+export default BellIcon;

package/src/components/icons/ChevronDown.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const ChevronDown = ({ className, style, title = "Open" }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    aria-hidden="true"
+    className={className}
+    style={style}
+    role="img"
+  >
+    <title>{title}</title>
+    <path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z" />
+  </svg>
+);
+
+export default ChevronDown;

package/src/components/icons/EmailIcon.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const EmailIcon = ({ className, style }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" className={className} style={style} aria-hidden="true">
+    <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
+  </svg>
+);
+
+export default EmailIcon;

package/src/components/icons/FaAngleDown.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaAngleDown(props) {
+  return (
+    <svg viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M31 192c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0L160 259.3 232.5 135.5c9.4-9.4 24.6-9.4 33.9 0L289 158c9.4 9.4 9.4 24.6 0 33.9l-128 128c-9.4 9.4-24.6 9.4-33.9 0z" />
+    </svg>
+  );
+}

package/src/components/icons/FaAngleRight.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaAngleRight(props) {
+  return (
+    <svg viewBox="0 0 256 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M64 448c-8.1 0-16.2-3.1-22.4-9.4-12.5-12.5-12.5-32.8 0-45.3L178.7 256 41.6 118.7c-12.5-12.5-12.5-32.8 0-45.3 12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3l-160 160C80.2 444.9 72.1 448 64 448z" />
+    </svg>
+  );
+}

package/src/components/icons/FaArrowDown.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaArrowDown(props) {
+  return (
+    <svg viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M413.1 222.5L224 411.7 34.9 222.5c-9.4-9.4-24.6-9.4-33.9 0L-21.6 245.1c-9.4 9.4-9.4 24.6 0 33.9L192.7 512c9.4 9.4 24.6 9.4 34 0L469.6 279c9.4-9.4 9.4-24.6 0-33.9l-22.6-22.6c-9.3-9.4-24.5-9.4-34 0z" />
+    </svg>
+  );
+}

package/src/components/icons/FaArrowLeft.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaArrowLeft(props) {
+  return (
+    <svg viewBox="0 0 256 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M31.1 239l160-160c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L154.9 256l92.7 120.5c9.4 9.4 9.4 24.6 0 33.9L225.1 433c-9.4 9.4-24.6 9.4-33.9 0l-160-160c-9.4-9.4-9.4-24.6 0-33.9z" />
+    </svg>
+  );
+}

package/src/components/icons/FaArrowUp.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaArrowUp(props) {
+  return (
+    <svg viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M34.9 289.5L224 100.3 413.1 289.5c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L259.3 7c-9.4-9.4-24.6-9.4-34 0L12.3 233c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.3 9.4 24.5 9.4 34-0.0z" />
+    </svg>
+  );
+}

package/src/components/icons/FaBell.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaBell(props) {
+  return (
+    <svg viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M224 512a64 64 0 0 0 64-64H160a64 64 0 0 0 64 64zm215.4-149.7C406.4 339 384 288 384 224 384 141 323 76 256 64V48a32 32 0 0 0-64 0v16C129 76 68 141 68 224c0 64-22.4 115-55.4 138.3A31.99 31.99 0 0 0 48 416h352a31.99 31.99 0 0 0 39.4-53.7z" />
+    </svg>
+  );
+}

package/src/components/icons/FaBullhorn.jsx

@@ -0,0 +1,10 @@
+// src/components/icons/FaBullhorn.jsx
+import React from "react";
+
+export default function FaBullhorn(props) {
+  return (
+    <svg viewBox="0 0 576 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M576 240c0-23.63-12.95-44.04-32-55.12V15.99C544 5.6 536.5 0 528 0c-3.999 0-8 1.251-11.5 3.75l-160 112C343 127.4 320 133.6 296 133.6H176C131.8 133.6 96 169.4 96 213.6v52.8c0 44.2 35.8 80 80 80h17.44l-17.36 112.4C173.4 473.3 183.1 480 192 480h80c30.63 0 56.25-21.98 61.63-53.12L354.4 346.6h-.001c-2.75 0-5.25-.62-8.001-.62H248c-4.418 0-8-3.578-8-8v-80c0-4.422 3.582-8 8-8h96.63c2.75 0 5.25-.625 7.999-.625L512 360.2c3.5 2.5 7.5 3.75 11.5 3.75c8.5 0 16-5.6 16-15.99V295.1C563.1 284 576 263.6 576 240zM448 292.7L354.2 230.8c-.75-.5-1.75-.75-2.625-.75H176c-8.836 0-16 7.164-16 16v16c0 8.836 7.164 16 16 16h120c4.418 0 8 3.578 8 8v16c0 4.422-3.582 8-8 8H176c-8.836 0-16 7.164-16 16v16c0 8.836 7.164 16 16 16h120c4.418 0 8 3.578 8 8v16c0 4.422-3.582 8-8 8H200c-4.418 0-8-3.578-8-8v-16c0-4.422 3.582-8 8-8h32v-16H200l-9.375-60.8C175 363.6 176 370.6 176 378.4c0 44.2-35.8 80-80 80H96c8.836 0 16-7.164 16-16V294.4C130.9 313.4 152 320 176 320h170.6c3.5 0 6.748-.875 9.873-2.125L448 374.3V292.7z" />
+    </svg>
+  );
+}

package/src/components/icons/FaCalendarAlt.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaCalendarAlt(props) {
+  return (
+    <svg viewBox="0 0 448 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M400 64h-48V24a24 24 0 0 0-48 0v40H144V24a24 24 0 0 0-48 0v40H48A48 48 0 0 0 0 112v320a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V112a48 48 0 0 0-48-48zM400 432H48V192h352z" />
+    </svg>
+  );
+}

package/src/components/icons/FaCheck.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaCheck(props) {
+  return (
+    <svg viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M173.9 439.4L7 272.5c-9.4-9.4-9.4-24.6 0-33.9l33.9-33.9c9.4-9.4 24.6-9.4 33.9 0L192 312l252.4-252.4c9.4-9.4 24.6-9.4 33.9 0l33.9 33.9c9.4 9.4 9.4 24.6 0 33.9L207.8 439.4c-9.4 9.4-24.6 9.4-33.9 0z" />
+    </svg>
+  );
+}

package/src/components/icons/FaCheckCircle.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaCheckCircle(props) {
+  return (
+    <svg viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M256 8C119.03 8 8 119.03 8 256s111.03 248 248 248 248-111.03 248-248S392.97 8 256 8zm123.31 170.69l-138 184c-4.8 6.4-12.8 10.31-20.8 10.31-8 0-16-3.91-20.8-10.31l-69.99-93.33c-9.07-12.09-5.96-29.33 6.13-38.4 12.09-9.07 29.33-5.96 38.4 6.13L234.7 318.7l118.9-158.53c9.07-12.09 26.31-15.2 38.4-6.13 12.09 9.07 15.2 26.31 6.13 38.45z" />
+    </svg>
+  );
+}

package/src/components/icons/FaCheckDouble.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaCheckDouble(props) {
+  return (
+    <svg viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M464 64.3L199.4 328.9 97 226.5c-9.4-9.4-24.6-9.4-33.9 0L23 267.6c-9.4 9.4-9.4 24.6 0 33.9l144 144c9.4 9.4 24.6 9.4 33.9 0l304-304c9.4-9.4 9.4-24.6 0-33.9L497.9 64.3c-9.4-9.4-24.6-9.4-33.9 0z" />
+    </svg>
+  );
+}

package/src/components/icons/FaChevronDown.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaChevronDown(props) {
+  return (
+    <svg viewBox="0 0 320 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M31 192c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0L160 259.3 232.5 135.5c9.4-9.4 24.6-9.4 33.9 0L289 158c9.4 9.4 9.4 24.6 0 33.9l-128 128c-9.4 9.4-24.6 9.4-33.9 0z" />
+    </svg>
+  );
+}

package/src/components/icons/FaChevronRight.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaChevronRight(props) {
+  return (
+    <svg viewBox="0 0 256 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M96 448c-12.5 0-25-7.5-31.2-19.3-12.5-24.9-6.1-55.3 15.9-72.2L225.9 256 80.7 155.5c-22-17-28.4-47.3-15.9-72.2C82.9 66.6 95.4 59 108 59s25 7.6 31.2 19.3l160 240C320.4 454.4 297.1 448 96 448z" />
+    </svg>
+  );
+}

package/src/components/icons/FaCircle.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaCircle(props) {
+  return (
+    <svg viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M256 8C119.03 8 8 119.03 8 256s111.03 248 248 248 248-111.03 248-248S392.97 8 256 8z" />
+    </svg>
+  );
+}

package/src/components/icons/FaComments.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaComments(props) {
+  return (
+    <svg viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21 95 56 128v88c0 6.6 7.7 10.4 12.9 6.5L152 346.8c24.4 6.8 50.1 10.2 76 10.2 141.4 0 256-93.1 256-208S397.4 32 256 32z" />
+    </svg>
+  );
+}

package/src/components/icons/FaEye.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaEye(props) {
+  return (
+    <svg viewBox="0 0 576 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M572.52 241.4C518.29 135.5 407.88 64 288 64 168.12 64 57.71 135.5 3.48 241.4a48.12 48.12 0 0 0 0 29.2C57.71 376.5 168.12 448 288 448c119.88 0 230.29-71.5 284.52-177.4a48.12 48.12 0 0 0 0-29.2zM288 400c-88.22 0-168.44-52.9-210.66-128C119.56 196.9 199.78 144 288 144s168.44 52.9 210.66 128C456.44 347.1 376.22 400 288 400zM288 176a112 112 0 1 0 112 112A112 112 0 0 0 288 176z" />
+    </svg>
+  );
+}

package/src/components/icons/FaEyeSlash.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaEyeSlash(props) {
+  return (
+    <svg viewBox="0 0 640 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M320 400c-78.8 0-147.1-45.6-180.3-112 19.3-36.2 50.7-64 88.3-79.6L118 85.3C90.7 103.7 63.3 127.6 39.6 156.5 3.4 203.8 0 256 0 256s111.03 248 248 248c29.1 0 56.9-4.6 82.8-13.1L320 400zM633.8 458.1L35.2 3.5A16 16 0 0 0 15.6 6.6L6.3 18.9a16 16 0 0 0 1.5 18l45.9 58.5C86 123.7 142.7 96 208 96c119.9 0 230.3 71.5 284.5 177.4a48.12 48.12 0 0 1 0 29.2c-14.3 27.5-34.2 51.5-57.9 72.9l71.7 91.3a16 16 0 0 0 22.4 2.8l9.3-12.3a16 16 0 0 0-2-22.5z" />
+    </svg>
+  );
+}

package/src/components/icons/FaHome.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaHome(props) {
+  return (
+    <svg viewBox="0 0 576 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M280.37 148.26L96 300.11V464a48 48 0 0 0 48 48l96-.3V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v143.7l96 .3a48 48 0 0 0 48-48V300L295.67 148.26a12 12 0 0 0-15.3 0zM571.6 251.5L488 182.6V44a12 12 0 0 0-12-12h-72a12 12 0 0 0-12 12v72.6L318.47 43a48 48 0 0 0-61 0L4.34 251.5c-12 9.7-1.7 31 13.4 31H64V464a48 48 0 0 0 48 48h416a48 48 0 0 0 48-48V282.5h46.3c15.1 0 25.4-21.3 13.3-31z" />
+    </svg>
+  );
+}

package/src/components/icons/FaKeyboard.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function FaKeyboard(props) {
+  return (
+    <svg viewBox="0 0 640 512" width="1em" height="1em" fill="currentColor" {...props}>
+      <path d="M0 96v320a32 32 0 0 0 32 32h576a32 32 0 0 0 32-32V96a32 32 0 0 0-32-32H32A32 32 0 0 0 0 96zm96 96h64v64H96v-64zm96 0h64v64h-64v-64zm96 0h64v64h-64v-64zm96 0h64v64h-64v-64zm96 0h64v64h-64v-64zM96 256h64v64H96v-64zm96 0h64v64h-64v-64z" />
+    </svg>
+  );
+}