add public website

apps/public/src/components/ui/RenderDots.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { cn } from '@/utils/cn';
+import { Asterisk, ChevronRight } from 'lucide-react';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+
+interface RenderDotsProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: string;
+  truncate?: boolean;
+}
+
+export function RenderDots({
+  children,
+  className,
+  truncate,
+  ...props
+}: RenderDotsProps) {
+  const parts = children.split('.');
+  const sliceAt = truncate && parts.length > 3 ? 3 : 0;
+  return (
+    <Tooltip
+      disableHoverableContent={true}
+      open={sliceAt === 0 ? false : undefined}
+    >
+      <TooltipTrigger>
+        <div {...props} className={cn('flex items-center gap-1', className)}>
+          {parts.slice(-sliceAt).map((str, index) => {
+            return (
+              <div className="flex items-center gap-1" key={str + index}>
+                {index !== 0 && (
+                  <ChevronRight className="relative top-[0.9px] !h-3 !w-3 flex-shrink-0" />
+                )}
+                {str.includes('[*]') ? (
+                  <>
+                    {str.replace('[*]', '')}
+                    <Asterisk className="relative top-[0.9px] !h-3 !w-3 flex-shrink-0" />
+                  </>
+                ) : str === '*' ? (
+                  <Asterisk className="relative top-[0.9px] !h-3 !w-3 flex-shrink-0" />
+                ) : (
+                  str
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </TooltipTrigger>
+      <TooltipContent align="start">
+        <p>{children}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}