diff --git a/apps/embed/public/styles.css b/apps/embed/public/styles.css index 29193bff..e945659e 100644 --- a/apps/embed/public/styles.css +++ b/apps/embed/public/styles.css @@ -1455,20 +1455,14 @@ outline: none; } } -.mt-\[-2px\] { - margin-top: -2px; -} .mt-\[-3px\] { margin-top: -3px; } -.mt-\[-5px\] { - margin-top: -5px; -} .mt-\[-6px\] { margin-top: -6px; } -.mt-\[5px\] { - margin-top: 5px; +.mt-\[3px\] { + margin-top: 3px; } .mt-\[10px\] { margin-top: 10px; @@ -1476,9 +1470,6 @@ .mt-\[20px\] { margin-top: 20px; } -.mr-\[5px\] { - margin-right: 5px; -} .mr-\[8px\] { margin-right: 8px; } @@ -1494,9 +1485,6 @@ .mb-\[5px\] { margin-bottom: 5px; } -.mb-\[10px\] { - margin-bottom: 10px; -} .mb-\[15px\] { margin-bottom: 15px; } @@ -1506,12 +1494,6 @@ .mb-\[25px\] { margin-bottom: 25px; } -.ml-\[5px\] { - margin-left: 5px; -} -.ml-\[10px\] { - margin-left: 10px; -} .status { display: inline-block; aspect-ratio: 1 / 1; @@ -1742,21 +1724,9 @@ .max-h-\[18px\] { max-height: 18px; } -.max-h-\[20-px\] { - max-height: 20-px; -} -.max-h-\[20px\] { - max-height: 20px; -} -.max-h-\[22px\] { - max-height: 22px; -} .max-h-\[25px\] { max-height: 25px; } -.max-h-\[30px\] { - max-height: 30px; -} .max-h-\[60px\] { max-height: 60px; } @@ -1766,12 +1736,6 @@ .max-h-\[100px\] { max-height: 100px; } -.max-h-\[200px\] { - max-height: 200px; -} -.max-h-\[250px\] { - max-height: 250px; -} .max-h-\[280px\] { max-height: 280px; } @@ -1806,9 +1770,6 @@ outline-style: none; } } -.w-1\/2 { - width: calc(1/2 * 100%); -} .w-1\/3 { width: calc(1/3 * 100%); } @@ -1827,18 +1788,9 @@ .max-w-\[18px\] { max-width: 18px; } -.max-w-\[20px\] { - max-width: 20px; -} -.max-w-\[22px\] { - max-width: 22px; -} .max-w-\[25px\] { max-width: 25px; } -.max-w-\[30px\] { - max-width: 30px; -} .max-w-\[60px\] { max-width: 60px; } @@ -1848,12 +1800,6 @@ .max-w-\[100px\] { max-width: 100px; } -.max-w-\[200px\] { - max-width: 200px; -} -.max-w-\[250px\] { - max-width: 250px; -} .max-w-\[280px\] { max-width: 280px; } @@ -1893,6 +1839,9 @@ .items-end { align-items: flex-end; } +.items-start { + align-items: flex-start; +} .\!justify-between { justify-content: space-between !important; } @@ -1957,9 +1906,6 @@ .rounded-\[5px\] { border-radius: 5px; } -.rounded-\[8px\] { - border-radius: 8px; -} .rounded-\[10px\] { border-radius: 10px; } @@ -2055,6 +2001,10 @@ --tw-border-style: none !important; border-style: none !important; } +.border-none { + --tw-border-style: none; + border-style: none; +} .input { &.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid) { border-color: var(--color-success); @@ -2407,10 +2357,6 @@ background-color: color-mix(in oklab, var(--color-base-300) 60%, transparent); } } -.bg-gradient-to-br { - --tw-gradient-position: to bottom right in oklab; - background-image: linear-gradient(var(--tw-gradient-stops)); -} .loading-spinner { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } diff --git a/apps/embed/src/components/Header/Header.tsx b/apps/embed/src/components/Header/Header.tsx index ee97c5fb..fd480737 100644 --- a/apps/embed/src/components/Header/Header.tsx +++ b/apps/embed/src/components/Header/Header.tsx @@ -1,57 +1,53 @@ -import dayjs from "dayjs"; import type { Profile } from "../../types/profile"; export type HeaderProps = { profile: Profile; - withoutRange?: boolean; }; function Header(props: HeaderProps) { - const end = dayjs(); - const start = end.subtract(7, "day"); - const range = `${start.format("DD MMM YYYY")} — ${end.format("DD MMM YYYY")}`; - return ( <> -
+
+
+
+ + + + +
+ @{props.profile.handle} +
+ +
+
+
+ +
- - - -
@{props.profile.handle}
+
+ + Rocksky +
- {!props.withoutRange && ( - <> - | - {range} - - )}
- - -
- - Rocksky -
-
); diff --git a/apps/embed/src/embeds/Embed.tsx b/apps/embed/src/embeds/Embed.tsx new file mode 100644 index 00000000..63b2b968 --- /dev/null +++ b/apps/embed/src/embeds/Embed.tsx @@ -0,0 +1,42 @@ +import { useState } from "react"; + +export function Embed() { + const [url, setUrl] = useState(""); // Initialize with an empty string + + const handleInputChange = (e: React.ChangeEvent) => { + const value = (e.target as any).value; + console.log("Input changed:", value); // Debugging log + setUrl(value); + + if ( + value.match( + /^https?:\/\/rocksky\.app\/did:plc:[a-z2-7]{24}\/scrobble\/[a-z0-9]{13,}$/, + ) + ) { + alert("ok"); + } + alert("z"); + }; + + return ( +
+
+

+ Embed a Rocksky Scrobble +

+ {/*