ui Architecture Docs
Home / File/ hover-card-rtl.tsx — ui Source File

hover-card-rtl.tsx — ui Source File

Architecture documentation for hover-card-rtl.tsx, a tsx file in the ui codebase. 3 imports, 0 dependents.

File tsx DocumentationAtlas SearchAPI 3 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  6dfe1e4d_f239_d8b0_b756_ef5a254312a2["hover-card-rtl.tsx"]
  43bb9fc1_6eab_13df_a99b_981eb13b9ec1["button"]
  6dfe1e4d_f239_d8b0_b756_ef5a254312a2 --> 43bb9fc1_6eab_13df_a99b_981eb13b9ec1
  50d6ff1b_e04d_362f_de6f_d9b085ff61c1["hover-card"]
  6dfe1e4d_f239_d8b0_b756_ef5a254312a2 --> 50d6ff1b_e04d_362f_de6f_d9b085ff61c1
  2c1404ab_bf28_6225_f9a0_b9e29400c66c["language-selector"]
  6dfe1e4d_f239_d8b0_b756_ef5a254312a2 --> 2c1404ab_bf28_6225_f9a0_b9e29400c66c
  style 6dfe1e4d_f239_d8b0_b756_ef5a254312a2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import { Button } from "@/examples/base/ui-rtl/button"
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/examples/base/ui-rtl/hover-card"

import {
  useTranslation,
  type Translations,
} from "@/components/language-selector"

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      trigger: "Wireless Headphones",
      name: "Wireless Headphones",
      price: "$99.99",
      "inline-start": "Inline Start",
      left: "Left",
      top: "Top",
      bottom: "Bottom",
      right: "Right",
      "inline-end": "Inline End",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      trigger: "سماعات لاسلكية",
      name: "سماعات لاسلكية",
      price: "٩٩.٩٩ $",
      "inline-start": "بداية السطر",
      left: "يسار",
      top: "أعلى",
      bottom: "أسفل",
      right: "يمين",
      "inline-end": "نهاية السطر",
    },
  },
  he: {
    dir: "rtl",
    values: {
      trigger: "אוזניות אלחוטיות",
      name: "אוזניות אלחוטיות",
      price: "99.99 $",
      "inline-start": "תחילת השורה",
      left: "שמאל",
      top: "למעלה",
      bottom: "למטה",
      right: "ימין",
      "inline-end": "סוף השורה",
    },
  },
}

const physicalSides = ["left", "top", "bottom", "right"] as const
const logicalSides = ["inline-start", "inline-end"] as const

export function HoverCardRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <div className="grid gap-4">
      <div className="flex flex-wrap justify-center gap-2">
        {physicalSides.map((side) => (
          <HoverCard key={side}>
            <HoverCardTrigger
              delay={10}
              closeDelay={100}
              render={<Button variant="outline" />}
            >
              {t[side]}
            </HoverCardTrigger>
            <HoverCardContent
              side={side}
              className="flex w-64 flex-col gap-1"
              dir={dir}
            >
              <div className="font-semibold">{t.name}</div>
              <div className="text-muted-foreground text-sm">{t.price}</div>
            </HoverCardContent>
          </HoverCard>
        ))}
      </div>
      <div className="flex flex-wrap justify-center gap-2">
        {logicalSides.map((side) => (
          <HoverCard key={side}>
            <HoverCardTrigger
              delay={10}
              closeDelay={100}
              render={<Button variant="outline" />}
            >
              {t[side]}
            </HoverCardTrigger>
            <HoverCardContent
              side={side}
              className="flex w-64 flex-col gap-1"
              dir={dir}
            >
              <div className="font-semibold">{t.name}</div>
              <div className="text-muted-foreground text-sm">{t.price}</div>
            </HoverCardContent>
          </HoverCard>
        ))}
      </div>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • button
  • hover-card
  • language-selector

Source

Frequently Asked Questions

What does hover-card-rtl.tsx do?
hover-card-rtl.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, SearchAPI subdomain.
What functions are defined in hover-card-rtl.tsx?
hover-card-rtl.tsx defines 1 function(s): HoverCardRtl.
What does hover-card-rtl.tsx depend on?
hover-card-rtl.tsx imports 3 module(s): button, hover-card, language-selector.
Where is hover-card-rtl.tsx in the architecture?
hover-card-rtl.tsx is located at apps/v4/examples/base/hover-card-rtl.tsx (domain: DocumentationAtlas, subdomain: SearchAPI, directory: apps/v4/examples/base).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free