fix: updated design of info button on files component (#9146)
* Updated design of info button * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Carlos Coelho <80289056+carlosrcoelho@users.noreply.github.com>
This commit is contained in:
parent
b519057df7
commit
e6ca374d07
1 changed files with 14 additions and 11 deletions
|
|
@ -1,4 +1,5 @@
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import ForwardedIconComponent from "@/components/common/genericIconComponent";
|
||||||
import ShadTooltip from "@/components/common/shadTooltipComponent";
|
import ShadTooltip from "@/components/common/shadTooltipComponent";
|
||||||
import useUploadFile from "@/hooks/files/use-upload-file";
|
import useUploadFile from "@/hooks/files/use-upload-file";
|
||||||
import useAlertStore from "@/stores/alertStore";
|
import useAlertStore from "@/stores/alertStore";
|
||||||
|
|
@ -103,19 +104,21 @@ export default function DragFilesComponent({
|
||||||
<h3 className="text-sm font-semibold">
|
<h3 className="text-sm font-semibold">
|
||||||
{isDragging ? "Drop files here" : "Click or drag files here"}
|
{isDragging ? "Drop files here" : "Click or drag files here"}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="flex items-center gap-1 text-xs text-muted-foreground">
|
<p className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||||
<span>{types.slice(0, 3).join(", ")}</span>
|
<div className="flex items-center gap-1">
|
||||||
{types.length > 3 && (
|
<span>{types.slice(0, 3).join(", ")}</span>
|
||||||
<ShadTooltip content={types.slice(3).join(", ")}>
|
{types.length > 3 && (
|
||||||
<span className="text-accent-pink-foreground underline">
|
<ShadTooltip content={types.slice(3).join(", ")}>
|
||||||
+{types.length - 3} more
|
<span className="text-muted-foreground flex items-center gap-1">
|
||||||
</span>
|
+{types.length - 3} more
|
||||||
</ShadTooltip>
|
<ForwardedIconComponent name="info" className="w-3 h-3" />
|
||||||
)}
|
</span>
|
||||||
|
</ShadTooltip>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
<span className="font-semibold">
|
<span className="font-semibold">
|
||||||
{formatFileSize(maxFileSizeUpload)}
|
{formatFileSize(maxFileSizeUpload)} max
|
||||||
</span>
|
</span>
|
||||||
<span>max</span>
|
|
||||||
</p>
|
</p>
|
||||||
<div className="pointer-events-none absolute inset-0 h-full w-full">
|
<div className="pointer-events-none absolute inset-0 h-full w-full">
|
||||||
<svg
|
<svg
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue