@ugurdemirel/landcraft 0.1.2 → 0.1.4

package/src/components/LanguageSwitcher.tsx

@@ -1,223 +0,0 @@
-import { useEffect, useId, useRef, useState, type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
-import { cn } from "../utils/cn";
-import { iso2ToFlagEmoji } from "../utils/iso2Flag";
-import { Modal } from "./Modal";
-import { Check, ChevronDown, Globe } from "../icons";
-
-export interface LanguageOption {
-  /** Language code (ISO 3166-1 alpha-2, e.g. `"tr"`) — this is the value passed to `onChange` and the flag source. */
-  code: string;
-  /** Native display name, e.g. `"Türkçe"`. */
-  label: string;
-}
-
-export type LanguageSwitcherOption = "dropdown" | "modal";
-
-export interface LanguageSwitcherProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
-  /** `dropdown` opens the anchored menu; `modal` opens a full dialog via the Modal component. */
-  option?: LanguageSwitcherOption;
-  /** Languages to switch between. Required — no built-in default language list. */
-  languages: LanguageOption[];
-  /** Controlled current language code. */
-  value?: string;
-  /** Uncontrolled initial language code. Defaults to the first language. */
-  defaultValue?: string;
-  /** Called with the selected language code. */
-  onChange?: (code: string) => void;
-  /** Dropdown menu alignment relative to its trigger. Defaults to `end`. */
-  align?: "start" | "end";
-  /** Heading rendered inside the `modal` option. Optional — pass it to show a title. */
-  modalTitle?: ReactNode;
-  /** Replace the globe icon with the selected language's flag emoji (and show flags in options). */
-  showFlag?: boolean;
-  /** Adapts colors for dark surfaces (inverse Navbar, classic Footer). */
-  inverse?: boolean;
-}
-
-export const LanguageSwitcher = ({
-  className,
-  languages,
-  option = "dropdown",
-  value,
-  defaultValue,
-  onChange,
-  align = "end",
-  modalTitle,
-  showFlag = false,
-  inverse = false,
-  ...props
-}: LanguageSwitcherProps) => {
-  const listboxId = useId();
-  const anchorName = `--ls-${listboxId.replace(/:/g, "")}`;
-  const rootRef = useRef<HTMLDivElement>(null);
-  const [open, setOpen] = useState(false);
-  const [internal, setInternal] = useState(defaultValue ?? languages[0]?.code ?? "");
-  const current = value ?? internal;
-  const currentLang = languages.find((l) => l.code === current) ?? languages[0];
-
-  const select = (code: string) => {
-    setInternal(code);
-    setOpen(false);
-    onChange?.(code);
-  };
-
-  const renderFlagOrGlobe = (
-    code: string,
-    { size = "text-sm", globeClass = "text-muted-foreground" }: { size?: string; globeClass?: string } = {},
-  ) => {
-    const flag = iso2ToFlagEmoji(code);
-    return flag ? (
-      <span aria-hidden className={cn(size, "leading-none")}>
-        {flag}
-      </span>
-    ) : (
-      <Globe className={cn("h-4 w-4 shrink-0", globeClass)} />
-    );
-  };
-
-  useEffect(() => {
-    if (!open || option !== "dropdown") return;
-    const onPointerDown = (event: PointerEvent) => {
-      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
-        setOpen(false);
-      }
-    };
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("pointerdown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open, option]);
-
-  if (languages.length === 0) return null;
-
-  const trigger = (
-    <button
-      type="button"
-      aria-haspopup={option === "dropdown" ? "listbox" : "dialog"}
-      aria-expanded={open}
-      aria-controls={option === "dropdown" ? listboxId : undefined}
-      onClick={() => setOpen((o) => !o)}
-      style={{ anchorName } as CSSProperties}
-      className={cn(
-        "inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border px-3 text-[13px] font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        inverse
-          ? "border-white/10 text-on-secondary hover:bg-white/10"
-          : "border-border text-foreground hover:bg-surface",
-      )}
-    >
-      {showFlag ? (
-        renderFlagOrGlobe(currentLang.code, { globeClass: inverse ? "opacity-70" : "text-muted-foreground" })
-      ) : (
-        <Globe
-          className={cn("h-4 w-4", inverse ? "opacity-70" : "text-muted-foreground")}
-        />
-      )}
-      <span className="tracking-tight">{currentLang.label}</span>
-      <ChevronDown
-        className={cn(
-          "h-3.5 w-3.5 transition-transform duration-150",
-          open && "rotate-180",
-          inverse ? "opacity-70" : "text-muted-foreground",
-        )}
-      />
-    </button>
-  );
-
-  if (option === "modal") {
-    return (
-      <>
-        <div ref={rootRef} className={cn("relative inline-flex", className)} {...props}>
-          {trigger}
-        </div>
-        <Modal open={open} onClose={() => setOpen(false)} title={modalTitle} size="sm">
-          <div role="listbox" aria-label="Select language" className="grid min-w-[19rem] gap-1.5">
-            {languages.map((lang) => {
-              const active = lang.code === current;
-              return (
-                <button
-                  key={lang.code}
-                  type="button"
-                  role="option"
-                  aria-selected={active}
-                  onClick={() => select(lang.code)}
-                  className={cn(
-                    "flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border px-4 py-3 text-left transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    active
-                      ? "border-primary/40 bg-primary-soft text-foreground"
-                      : "border-border text-foreground hover:bg-surface-strong",
-                  )}
-                >
-                  <span className="flex items-center gap-3">
-                    {showFlag ? renderFlagOrGlobe(lang.code, { size: "text-base" }) : null}
-                    <span className="text-sm font-medium">{lang.label}</span>
-                  </span>
-                  <span className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                    {lang.code}
-                    {active ? <Check className="h-4 w-4 text-primary" /> : null}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        </Modal>
-      </>
-    );
-  }
-
-  return (
-    <div ref={rootRef} className={cn("relative inline-flex", className)} {...props}>
-      {trigger}
-
-      <div
-        id={listboxId}
-        role="listbox"
-        aria-label="Select language"
-        style={
-          {
-            positionAnchor: anchorName,
-            top: "anchor(bottom)",
-            ...(align === "start" ? { left: "anchor(left)" } : { right: "anchor(right)" }),
-          } as CSSProperties
-        }
-        className={cn(
-          "absolute top-full z-50 mt-2 min-w-[10rem] rounded-lg border border-border bg-surface p-1 shadow-raised transition-all duration-150",
-          align === "start" ? "left-0" : "right-0",
-          open
-            ? "visible translate-y-0 opacity-100"
-            : "pointer-events-none invisible -translate-y-1 opacity-0",
-        )}
-      >
-        {languages.map((lang) => {
-          const active = lang.code === current;
-          return (
-            <button
-              key={lang.code}
-              type="button"
-              role="option"
-              aria-selected={active}
-              onClick={() => select(lang.code)}
-              className={cn(
-                "flex w-full cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-2 text-[13px] font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                active
-                  ? "bg-surface-strong text-foreground"
-                  : "text-muted-foreground hover:bg-surface-strong hover:text-foreground",
-              )}
-            >
-              <span className="flex items-center gap-2.5">
-                {showFlag ? renderFlagOrGlobe(lang.code) : null}
-                {lang.label}
-              </span>
-              {active ? <Check className="h-3.5 w-3.5 text-primary" /> : null}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-LanguageSwitcher.displayName = "LanguageSwitcher";

package/src/components/LogoCloud.tsx

@@ -1,100 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../utils/cn";
-
-export interface LogoItem {
-  name: string;
-  src?: string;
-  href?: string;
-}
-
-export interface LogoCloudProps extends HTMLAttributes<HTMLDivElement> {
-  logos: LogoItem[];
-  title?: string;
-  /** Visual option: quiet list · infinite marquee · hairline strip */
-  option?: "quiet" | "marquee" | "strip";
-}
-
-const LogoText = ({ name }: { name: string }) => (
-  <span className="text-lg font-semibold tracking-tight text-foreground/45 transition-colors duration-200 group-hover:text-foreground">
-    {name}
-  </span>
-);
-
-const LogoMark = ({ logo }: { logo: LogoItem }) =>
-  logo.src ? (
-    <img
-      src={logo.src}
-      alt={logo.name}
-      loading="lazy"
-      className={cn(
-        "max-h-7 w-auto opacity-50 grayscale transition-all duration-200 group-hover:opacity-90 group-hover:grayscale-0",
-        "h-7",
-      )}
-    />
-  ) : (
-    <LogoText name={logo.name} />
-  );
-
-export const LogoCloud = forwardRef<HTMLDivElement, LogoCloudProps>(
-  ({ className, logos, title, option = "quiet", ...props }, ref) => {
-    if (option === "marquee") {
-      const doubled = [...logos, ...logos];
-      return (
-        <div ref={ref} className={cn("w-full overflow-hidden", className)} {...props}>
-          {title ? (
-            <p className="mb-8 text-center text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
-              {title}
-            </p>
-          ) : null}
-          <div className="mask-fade-x">
-            <div className="flex w-max animate-marquee gap-14 pr-14 motion-reduce:animate-none">
-              {doubled.map((logo, i) => (
-                <div key={`${logo.name}-${i}`} className="group shrink-0">
-                  <LogoMark logo={logo} />
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    if (option === "strip") {
-      return (
-        <div ref={ref} className={cn("w-full", className)} {...props}>
-          {title ? (
-            <p className="mb-8 text-center text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
-              {title}
-            </p>
-          ) : null}
-          <ul className="flex flex-wrap items-center justify-center gap-x-10 gap-y-4 rounded-2xl border border-border bg-surface px-6 py-7 sm:gap-x-14">
-            {logos.map((logo) => (
-              <li key={logo.name} className="group">
-                <LogoMark logo={logo} />
-              </li>
-            ))}
-          </ul>
-        </div>
-      );
-    }
-
-    // quiet — unbounded spread of wordmarks.
-    return (
-      <div ref={ref} className={cn("w-full", className)} {...props}>
-        {title ? (
-          <p className="mb-8 text-center text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
-            {title}
-          </p>
-        ) : null}
-        <ul className="flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
-          {logos.map((logo) => (
-            <li key={logo.name} className="group">
-              <LogoMark logo={logo} />
-            </li>
-          ))}
-        </ul>
-      </div>
-    );
-  },
-);
-LogoCloud.displayName = "LogoCloud";

package/src/components/Navbar.tsx

@@ -1,195 +0,0 @@
-import { useState, type ElementType, type HTMLAttributes, type ReactNode } from "react";
-import { cn } from "../utils/cn";
-import { Menu, X } from "../icons";
-
-export interface NavLink {
-  label: string;
-  href: string;
-}
-
-export interface NavbarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  variant?: "classic" | "floating" | "inverse";
-  /** Wordmark or fallback text rendered when no logo is supplied. */
-  brand?: ReactNode;
-  /** Custom logo node (component, <img>, inline SVG…). Replaces the wordmark. */
-  logo?: ReactNode;
-  /** Quick logo image source. */
-  logoSrc?: string;
-  logoAlt?: string;
-  /** Size / position tuning for logo images. Defaults to `h-7 w-auto`. */
-  logoClassName?: string;
-  brandHref?: string;
-  links: NavLink[];
-  actions?: ReactNode;
-  cta?: ReactNode;
-  /** Optional language switcher rendered on the right (desktop) and beside the menu button (mobile). */
-  languageSwitcher?: ReactNode;
-  sticky?: boolean;
-  /** Component used to render the brand and nav links. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
-  LinkComponent?: ElementType;
-}
-
-const linkStyles = {
-  classic: "text-muted-foreground hover:text-foreground",
-  floating: "text-muted-foreground hover:text-foreground",
-  inverse: "text-on-secondary/60 hover:text-on-secondary",
-};
-
-export const Navbar = ({
-  className,
-  variant = "classic",
-  brand,
-  logo,
-  logoSrc,
-  logoAlt,
-  logoClassName,
-  brandHref = "#",
-  links,
-  actions,
-  cta,
-  languageSwitcher,
-  sticky = true,
-  LinkComponent,
-  ...props
-}: NavbarProps) => {
-  const [open, setOpen] = useState(false);
-  const inverse = variant === "inverse";
-  const Link = LinkComponent ?? "a";
-
-  const shell = cn(
-    "w-full transition-colors duration-200",
-    sticky && "sticky top-0 z-50",
-    variant === "classic" &&
-      "border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75",
-    variant === "floating" && "px-0",
-    variant === "inverse" && "border-b border-white/10 bg-[#101010]/85 backdrop-blur-md",
-  );
-
-  const bar = cn(
-    "flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200",
-    variant === "floating" &&
-      "mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70",
-    variant === "classic" && "mx-auto max-w-6xl px-5 sm:px-8",
-    variant === "inverse" && "mx-auto max-w-6xl px-5 sm:px-8",
-  );
-
-  const logoNode =
-    logo ??
-    (logoSrc ? (
-      <img
-        src={logoSrc}
-        alt={logoAlt ?? (typeof brand === "string" ? brand : "Logo")}
-        className={cn("h-7 w-auto", logoClassName)}
-      />
-    ) : null);
-
-  const brandNode = logoNode ? (
-    <span className="flex items-center">{logoNode}</span>
-  ) : (
-    <span
-      className={cn(
-        "flex items-center gap-2 font-display text-[17px] font-bold tracking-tight",
-        inverse ? "text-on-secondary" : "text-foreground",
-      )}
-    >
-      <span
-        aria-hidden
-        className={cn(
-          "inline-block h-2.5 w-2.5 rounded-sm",
-          inverse ? "bg-on-secondary" : "bg-foreground",
-        )}
-      />
-      {brand}
-    </span>
-  );
-
-  return (
-    <header className={cn(shell, variant === "floating" && "px-3 sm:px-6", className)} {...props}>
-      <nav className={bar} aria-label="Main navigation">
-        <Link href={brandHref} className="shrink-0">
-          {brandNode}
-        </Link>
-
-        <ul className="hidden items-center gap-7 md:flex">
-          {links.map((link) => (
-            <li key={link.href}>
-              <Link
-                href={link.href}
-                className={cn(
-                  "text-sm font-medium transition-colors duration-150",
-                  linkStyles[variant],
-                )}
-              >
-                {link.label}
-              </Link>
-            </li>
-          ))}
-        </ul>
-
-        <div className="hidden items-center gap-3 md:flex">
-          {languageSwitcher}
-          {actions}
-          {cta}
-        </div>
-
-        {languageSwitcher ? (
-          <div className="flex items-center md:hidden">{languageSwitcher}</div>
-        ) : null}
-
-        <button
-          type="button"
-          aria-label={open ? "Close menu" : "Open menu"}
-          aria-expanded={open}
-          onClick={() => setOpen((o) => !o)}
-          className={cn(
-            "inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md md:hidden",
-            "transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            inverse ? "text-on-secondary hover:bg-white/10" : "text-foreground hover:bg-surface",
-          )}
-        >
-          {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-        </button>
-      </nav>
-
-      {/* Mobile panel */}
-      <div
-        className={cn(
-          "grid transition-[grid-template-rows,opacity] duration-200 md:hidden",
-          open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
-          inverse
-            ? "border-t border-white/10 bg-[#101010]"
-            : variant === "floating"
-              ? "mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface"
-              : "border-t border-border bg-background",
-        )}
-      >
-        <div className="min-h-0 overflow-hidden">
-          <ul className={cn("flex flex-col py-4", variant !== "floating" && "px-5")}>
-            {links.map((link) => (
-              <li key={link.href}>
-                <Link
-                  href={link.href}
-                  onClick={() => setOpen(false)}
-                  className={cn(
-                    "block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",
-                    inverse
-                      ? "text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary"
-                      : "text-muted-foreground hover:bg-surface hover:text-foreground",
-                  )}
-                >
-                  {link.label}
-                </Link>
-              </li>
-            ))}
-            {cta ? (
-              <li className="mt-3 px-2 pb-2">{cta}</li>
-            ) : actions ? (
-              <li className="mt-3 flex flex-wrap gap-3 px-2 pb-2">{actions}</li>
-            ) : null}
-          </ul>
-        </div>
-      </div>
-    </header>
-  );
-};
-Navbar.displayName = "Navbar";