wip fix

2024-02-07 09:17:38 -07:00 · 2024-02-07 09:17:38 -07:00 · 523c932541
parent 1ac69b0409
commit 523c932541
13 changed files with 103 additions and 50 deletions
--- a/.gitignore
+++ b/.gitignore
--- a/comps/custom/Card.tsx
+++ b/comps/custom/Card.tsx
@ -71,7 +71,7 @@ export const Card: FC<{
  }

  return (
-    <card.Card className="c-flex c-flex-1">
+    <card.Card className="c-flex c-flex-1 c-items-center">
      <div className={cn("c-p-3 c-text-[14px] c-flex-1")}>
        {!!title && (title.left || title.right) && (
          <div className="c-tracking-tight c-text-sm c-font-medium c-flex c-justify-between c-space-x-1 mb-1 c-items-center">
@ -81,16 +81,18 @@ export const Card: FC<{
            )}
          </div>
        )}
-        <card.CardTitle className="c-whitespace-nowrap pb-1 h-[28px] c-overflow-hidden">
-          {local.status_value === "ready" ? (
-            formatObject(local.value)
-          ) : (
-            <div className="flex flex-col space-y-1">
-              <Skeleton className="h-[10px] c-w-[50px]" />
-              <Skeleton className="h-[10px] c-w-[40px]" />
-            </div>
-          )}
-        </card.CardTitle>
+        {!!value && (
+          <card.CardTitle className="c-whitespace-nowrap pb-1 h-[28px] c-overflow-hidden">
+            {local.status_value === "ready" ? (
+              formatObject(local.value)
+            ) : (
+              <div className="flex flex-col space-y-1">
+                <Skeleton className="h-[10px] c-w-[50px]" />
+                <Skeleton className="h-[10px] c-w-[40px]" />
+              </div>
+            )}
+          </card.CardTitle>
+        )}
        <card.CardDescription className="c-text-xs c-whitespace-pre-wrap">
          {local.status_desc === "ready" ? (
            formatObject(local.desc)
--- a/comps/custom/Detail.tsx
+++ b/comps/custom/Detail.tsx
@ -2,6 +2,8 @@ import { useLocal } from "@/utils/use-local";
 import { cx } from "class-variance-authority";
 import { FC, useEffect } from "react";
 import { Skeleton } from "../ui/skeleton";
+import { ArrowRight, ArrowRightCircle, ChevronRight } from "lucide-react";
+import { IconRight } from "react-day-picker";

 export const Detail: FC<{
  detail: (item: any) => Record<string, [string, string, string]>;
@ -70,10 +72,15 @@ export const Detail: FC<{

        if (mode === "standard") {
          return (
-            <div key={idx} className="c-flex c-flex-col c-items-stretch mb-2">
+            <div key={idx} className="c-flex c-flex-col c-items-stretch">
              <div className="c-flex c-font-bold">{label}</div>
              <div className="c-flex">
-                <Linkable sample={sample} link={link} status={local.status} />
+                <Linkable
+                  sample={sample}
+                  mode={mode}
+                  link={link}
+                  status={local.status}
+                />
              </div>
            </div>
          );
@ -81,13 +88,29 @@ export const Detail: FC<{
          return (
            <div
              key={idx}
-              className="c-flex c-flex-row c-items-center mb-1 border-b"
+              className={cx(
+                "c-flex c-flex-row c-items-center",
+                !is_first && "border-t",
+                css`
+                  min-height: 30px;
+                `,
+                isMobile && "c-justify-between"
+              )}
            >
              <div className="c-flex c-font-bold c-min-w-[30%] c-overflow-hidden c-text-sm">
                {label}
              </div>
-              <div className={cx("c-flex c-flex-1 c-ml-2 items-center")}>
-                <Linkable sample={sample} link={link} status={local.status} />
+              <div
+                className={cx("c-flex c-flex-1 c-ml-2 c-flex-col c-items-end ")}
+              >
+                <div>
+                  <Linkable
+                    mode={mode}
+                    sample={sample}
+                    link={link}
+                    status={local.status}
+                  />
+                </div>
              </div>
            </div>
          );
@ -103,7 +126,12 @@ export const Detail: FC<{
            >
              <div className={"c-flex c-font-bold"}>{label}</div>
              <div className="c-flex">
-                <Linkable sample={sample} link={link} status={local.status} />
+                <Linkable
+                  mode={mode}
+                  sample={sample}
+                  link={link}
+                  status={local.status}
+                />
              </div>
            </div>
          );
@ -116,8 +144,9 @@ export const Detail: FC<{
 const Linkable: FC<{
  sample?: string;
  link?: string;
+  mode: "standard" | "compact" | "inline";
  status: "init" | "loading" | "ready";
-}> = ({ sample, link, status }) => {
+}> = ({ sample, link, status, mode }) => {
  const loading = (
    <Skeleton
      className={cx(
@ -136,7 +165,13 @@ const Linkable: FC<{

  return (
    <div
-      className="c-flex-1 c-px-2 c-my-1 c-rounded-md c-border c-flex c-items-center cursor-pointer"
+      className={cx(
+        "c-flex-1 c-my-1 c-px-2 c-rounded-md c-border c-flex c-items-center cursor-pointer",
+        css`
+          margin-left: -4px;
+        `,
+        mode !== "standard" && "text-sm"
+      )}
      onClick={() => {
        if (!isEditor) {
          navigate(link);
@ -150,11 +185,11 @@ const Linkable: FC<{
              "c-flex-1",
              css`
                line-height: 1.1;
-                padding: 5px 0px;
+                padding: 3px 0px;
              `
            )}
          >
-            {sample || '-'}
+            {sample || "-"}
          </div>
        </>
      ) : (
@ -171,21 +206,23 @@ const Linkable: FC<{
          {loading}
        </div>
      )}
-      <svg
-        width="15"
-        height="15"
-        viewBox="0 0 15 15"
-        fill="none"
-        className="c-ml-2"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        className={cx(
+          "c-flex c-items-center c-justify-center",
+          css`
+            width: 20px;
+            height: 80%;
+            padding: 0px;
+            margin: 0px;
+            margin-left: 10px;
+            margin-right: -5px;
+            border-left: 1px solid #ececeb;
+            padding-left: 3px;
+          `
+        )}
      >
-        <path
-          d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z"
-          fill="currentColor"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-        ></path>
-      </svg>
+        <ArrowRight width={12} height={12} />
+      </div>
    </div>
  );
 };
--- a/comps/custom/Tab.tsx
+++ b/comps/custom/Tab.tsx
@ -18,11 +18,14 @@ export const Tab: FC<{
 }> = ({ tabs, active, body, PassProp, on_load }) => {
  const local = useLocal(
    {
-      active,
+      activeIndex: active,
      count: [] as (number | string)[],
+      mode: "number" as "number" | "hash",
      status: "init" as "init" | "load" | "ready",
    },
    () => {
+      if (local.mode === "hash") {
+      }
      if (local.status === "init") {
        if (typeof on_load === "function" && !isEditor) {
          local.status = "load";
@ -46,14 +49,25 @@ export const Tab: FC<{

  const all_tabs = tabs({ count: local.count || [] });

-  if (!parseInt(local.active)) {
-    local.active = "0";
+  if (local.activeIndex === "#") {
+    local.mode = "hash";
+  }
+
+  if (!parseInt(local.activeIndex)) {
+    if (local.mode === "hash") {
+      local.activeIndex = location.hash.substring(1);
+      if (!parseInt(local.activeIndex)) {
+        local.activeIndex = "0";
+      }
+    } else {
+      local.activeIndex = "0";
+    }
  }

  return (
    <div className="c-flex c-flex-1 c-w-full c-flex-col c-items-stretch">
      <Tabs
-        value={local.active}
+        value={local.activeIndex}
        className={cx(
          css`
            padding: 0;
@ -84,7 +98,7 @@ export const Tab: FC<{
              <TabsTrigger
                value={idx + ""}
                onClick={() => {
-                  local.active = idx.toString();
+                  local.activeIndex = idx.toString();
                  local.render();
                  if (e.navigate) {
                    navigate(e.navigate);
@ -108,7 +122,7 @@ export const Tab: FC<{
                    "c-p-1 c-h-10 c-flex c-items-center",
                    e.width ? "" : " c-flex-1 ",
                    e.count ? " c-justify-between" : "",
-                    local.active === idx.toString()
+                    local.activeIndex === idx.toString()
                      ? css`
                          border-bottom: 2px solid
                            ${e.color ? e.color : "#3c82f6"};
@ -116,7 +130,9 @@ export const Tab: FC<{
                      : "border-b-transparent"
                  )}
                >
-                  <div className={cx("c-mr-1 c-flex-1 c-px-1 c-flex")}>{e.label}</div>
+                  <div className={cx("c-mr-1 c-flex-1 c-px-1 c-flex")}>
+                    {e.label}
+                  </div>
                  {has_count && (
                    <div
                      className={cx(
@ -138,7 +154,7 @@ export const Tab: FC<{
        </TabsList>
      </Tabs>
      <div className="c-flex-1 c-flex c-flex-col">
-        <PassProp activeIndex={parseInt(local.active)}>{body}</PassProp>
+        <PassProp activeIndex={parseInt(local.activeIndex)}>{body}</PassProp>
      </div>
    </div>
  );
--- a/comps/form/Field.tsx
+++ b/comps/form/Field.tsx
@ -83,6 +83,7 @@ export const Field: FC<{
          local.render();
          (async () => {
            const res = await slider_options();
+
            local.slider.opt = res;
            local.render();
          })();
@ -144,7 +145,7 @@ export const Field: FC<{
                        min={local.slider.opt.min.value}
                        max={local.slider.opt.max.value}
                      />
-                      <div className="c-w-full c-bg-slate-200 c-mx-auto c-text-center">
+                      <div className="c-w-full c-mx-auto c-text-center">
                        {local.slider.value}
                      </div>
                    </div>
--- a/comps/form/InputMoney/index.tsx
+++ b/comps/form/InputMoney/index.tsx
@ -44,13 +44,11 @@ export const InputMoney: FC<{
 };

 export const formatMoney = (num: any) => {
-  // add comma
  if (!!num) {
    let str = num;
    if (typeof num === "number") str = num.toString();
    if (typeof str === "string")
      return str.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-
-    return "";
  }
+  return "-";
 };
--- a/comps/form/Slider/types.ts
+++ b/comps/form/Slider/types.ts
--- a/comps/ui/button.tsx
+++ b/comps/ui/button.tsx
@ -46,7 +46,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
      <Comp
        className={cn(
          buttonVariants({ variant, size, className }),
-          `btn-${variant || "default"} c-transition-all c-duration-300`
+          `btn-${variant || "default"} btn c-transition-all c-duration-300`
        )}
        ref={ref}
        {...props}
--- a/comps/ui/slider.tsx
+++ b/comps/ui/slider.tsx
--- a/exports.tsx
+++ b/exports.tsx
--- a/utils/date.ts
+++ b/utils/date.ts
--- a/utils/globals.d.ts
+++ b/utils/globals.d.ts
@ -1,4 +1,3 @@
-declare var db: any;
 declare var isEditor: boolean;
 declare var isMobile: boolean;
 declare var isDesktop: boolean;