Skip to content

Commit

Permalink
fix: replace className with class for Deno Fresh compliance
Browse files Browse the repository at this point in the history 
Co-Authored-By: devin.riot152@passmail.net <devin.riot152@passmail.net>
  • Loading branch information
@devin-ai-integration
devin-ai-integration[bot] and devin.riot152@passmail.net committed Dec 19, 2024
1 parent 4222e42 commit c54d375
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 62 deletions.
4 changes: 2 additions & 2 deletions components/shared/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,11 @@ export function Button({
<img
src={icon}
alt={iconAlt || ""}
className={iconClass}
class={iconClass}
/>
)
: (
<div className={iconClass}>
<div class={iconClass}>
{icon}
</div>
)
Expand Down
42 changes: 21 additions & 21 deletions components/shared/HoldersGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,32 @@ const tableHeaders = [

function HolderRow({ holder }: { holder: Holder }) {
return (
<tr className="bg-stamp-grey-darker/10 hover:bg-stamp-grey-darker/20 transition-colors">
<td className="text-left py-2 px-4 first:rounded-l-lg last:rounded-r-lg">
<tr>
<td class="text-left py-0">
<a
href={`/wallet/${holder.address}`}
data-tooltip-target={holder.address || "Unknown"}
title={holder.address || "Unknown"}
className="hover:text-stamp-purple transition-colors"
class="hover:text-stamp-purple transition-colors"
>
{holder.address
? (
<>
<span className="mobileLg:hidden">
<span class="mobileLg:hidden">
{abbreviateAddress(holder.address, 8)}
</span>
<span className="hidden mobileLg:inline">
<span class="hidden mobileLg:inline">
{holder.address}
</span>
</>
)
: "Unknown"}
</a>
</td>
<td className="text-center py-2 px-4 first:rounded-l-lg last:rounded-r-lg">
<td class="text-center py-0">
{holder.amt}
</td>
<td className="text-right py-2 px-4 first:rounded-l-lg last:rounded-r-lg">
<td class="text-right py-0">
{holder.percentage}%
</td>
</tr>
Expand All @@ -55,8 +55,8 @@ function HolderRow({ holder }: { holder: Holder }) {
export function HoldersGraph({ holders = [] }: HoldersGraphProps) {
if (!holders.length) {
return (
<div className="flex flex-col bg-gradient-to-br primary-gradient p-6 relative rounded-lg">
<div className="text-center py-10">No holder data available</div>
<div class="flex flex-col bg-gradient-to-br primary-gradient p-6 relative rounded-lg">
<div class="text-center py-10">No holder data available</div>
</div>
);
}
Expand All @@ -72,26 +72,26 @@ export function HoldersGraph({ holders = [] }: HoldersGraphProps) {
const totalHolders = holders.length;

return (
<div className="flex flex-col dark-gradient p-3 mobileMd:p-6 relative rounded-lg">
<div className="text-left tablet:text-right">
<p className={dataLabelClassName}>HOLDERS</p>
<p className={dataValueXLClassName}>{totalHolders}</p>
<div class="flex flex-col dark-gradient p-3 mobileMd:p-6 relative rounded-lg">
<div class="text-left tablet:text-right">
<p class={dataLabelClassName}>HOLDERS</p>
<p class={dataValueXLClassName}>{totalHolders}</p>
</div>
<div className="flex flex-col tablet:flex-row w-full gap-6">
<div className="flex justify-center tablet:justify-start">
<div class="flex flex-col tablet:flex-row w-full gap-6">
<div class="flex justify-center tablet:justify-start">
<HoldersPieChart holders={holders} />
</div>

<div className="relative w-full max-w-full">
<div className="h-48 mobileLg:h-64 overflow-x-auto overflow-y-auto mt-3 mobileMd:mt-6 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100">
<table className="w-full table-auto border-separate border-spacing-y-2">
<thead className={tableLabelClassName}>
<div class="relative w-full max-w-full">
<div class="h-48 mobileLg:h-64 overflow-x-auto overflow-y-auto mt-3 mobileMd:mt-6 scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100">
<table class="w-full table-auto border-separate border-spacing-y-2">
<thead class={tableLabelClassName}>
<tr>
{tableHeaders.map(({ key, label }) => (
<th
key={key}
scope="col"
className={`pb-1.5 px-4 ${
class={`pb-1.5 px-4 ${
key === "address"
? "text-left"
: key === "percent"
Expand All @@ -104,7 +104,7 @@ export function HoldersGraph({ holders = [] }: HoldersGraphProps) {
))}
</tr>
</thead>
<tbody className={tableValueClassName}>
<tbody class={tableValueClassName}>
{holders.map((holder, index) => (
<HolderRow key={index} holder={holder} />
))}
Expand Down
22 changes: 11 additions & 11 deletions components/stampDetails/StampDispensers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,30 +39,30 @@ function DispenserRow({ dispenser }: { dispenser: Dispenser }) {

return (
<tr class={rowClassName}>
<td className="text-left py-0">
<td class="text-left py-0">
{formatSatoshisToBTC(dispenser.satoshirate)}
</td>
<td className="text-center py-0">
<td class="text-center py-0">
{formatNumber(dispenser.escrow_quantity, 0)}
</td>
<td className="text-center py-0">
<td class="text-center py-0">
{formatNumber(dispenser.give_quantity, 0)}
</td>
<td className="text-center py-0">
<td class="text-center py-0">
{formatNumber(dispenser.give_remaining, 0)}
</td>
<td className="text-center py-0">
<span className="tablet:hidden">
<td class="text-center py-0">
<span class="tablet:hidden">
{abbreviateAddress(dispenser.source, 4)}
</span>
<span className="hidden tablet:inline">
<span class="hidden tablet:inline">
{abbreviateAddress(dispenser.source, 8)}
</span>
</td>
<td className="text-center py-0">
<td class="text-center py-0">
{dispenser.confirmed ? "YES" : "NO"}
</td>
<td className="text-right py-0">
<td class="text-right py-0">
{!dispenser.close_block_index || dispenser.close_block_index <= 0
? "OPEN"
: dispenser.close_block_index}
Expand All @@ -78,8 +78,8 @@ export function StampDispensers({ dispensers }: StampDispensersProps) {
);

return (
<div className="relative max-w-full">
<div className="max-h-96 overflow-x-auto">
<div class="relative max-w-full">
<div class="max-h-96 overflow-x-auto">
<table class={`${tableValueClassName} w-full table-fixed`}>
<colgroup>
<col class="w-[16%] tablet:w-[14%]" /> {/* Price */}
Expand Down
20 changes: 10 additions & 10 deletions islands/Carousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ export default function Carousel(props: CarouselProps) {
data-hash={stamp.tx_hash}
>
<a target="_top" href={`/stamp/${stamp.tx_hash}`}>
<div className="hover-gradient hover:bg-stamp-purple-bright hover:shadow-stamp p-0.5 rounded-md">
<div className="relative min-h-[150px] mobileMd:min-h-[242px] mobileLg:min-h-[200px] tablet:min-h-[269px] desktop:min-h-[408px] p-[6px] mobileMd:p-[12px] desktop:p-[18px] rounded-md bg-stamp-card-bg hover:bg-black">
<div class="hover-gradient hover:bg-stamp-purple-bright hover:shadow-stamp p-0.5 rounded-md">
<div class="relative min-h-[150px] mobileMd:min-h-[242px] mobileLg:min-h-[200px] tablet:min-h-[269px] desktop:min-h-[408px] p-[6px] mobileMd:p-[12px] desktop:p-[18px] rounded-md bg-stamp-card-bg hover:bg-black">
<img
src={`/content/${stamp.tx_hash}.${extension}`}
alt={`Stamp #${stamp.stamp}`}
Expand All @@ -71,24 +71,24 @@ export default function Carousel(props: CarouselProps) {
(
<div
id="hover"
className="flex items-end mobileLg:w-calc-24 w-calc-12 h-[100%] hover-dark-gradient absolute bottom-[2%] opacity-0 group-hover:opacity-100 transition-opacity duration-300"
class="flex items-end mobileLg:w-calc-24 w-calc-12 h-[100%] hover-dark-gradient absolute bottom-[2%] opacity-0 group-hover:opacity-100 transition-opacity duration-300"
>
<div className="w-full mobileLg:pb-4 pb-1">
<div className="w-full flex justify-center items-center">
<h3 className="desktop:text-4xl mobileLg:text-2xl text-xl gray-gradient1 font-black">
<span className="text-stamp-grey-light font-light">
<div class="w-full mobileLg:pb-4 pb-1">
<div class="w-full flex justify-center items-center">
<h3 class="desktop:text-4xl mobileLg:text-2xl text-xl gray-gradient1 font-black">
<span class="text-stamp-grey-light font-light">
#
</span>
{stamp.stamp}
</h3>
</div>
<div className="w-full px-4 py-1 flex justify-between items-center">
<h4 className="desktop:text-2xl mobileLg:text-lg text-base gray-gradient3 font-bold mobileMd:text-start text-center w-full">
<div class="w-full px-4 py-1 flex justify-between items-center">
<h4 class="desktop:text-2xl mobileLg:text-lg text-base gray-gradient3 font-bold mobileMd:text-start text-center w-full">
{stamp.creator_name
? stamp.creator_name
: abbreviateAddress(stamp.creator, 4)}
</h4>
<h5 className="desktop:text-2xl mobileLg:text-xl text-base text-stamp-grey-darker font-bold mobileMd:block text-end w-full hidden">
<h5 class="desktop:text-2xl mobileLg:text-xl text-base text-stamp-grey-darker font-bold mobileMd:block text-end w-full hidden">
{stamp.divisible
? (stamp.supply / 100000000).toFixed(2)
: stamp.supply > 100000
Expand Down
30 changes: 15 additions & 15 deletions islands/stamp/details/StampBuyModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,39 +143,39 @@ const StampBuyModal = ({

return (
<ModalLayout onClose={handleCloseModal} title="BUY">
<div className="flex flex-row gap-6">
<div className="flex flex-col w-[156px] mobileLg:w-[164px]">
<div class="flex flex-row gap-6">
<div class="flex flex-col w-[156px] mobileLg:w-[164px]">
<StampImage
stamp={stamp}
className=""
class=""
flag={false}
/>
</div>
<div className="flex flex-col w-full">
<p className="text-3xl mobileLg:text-4xl gray-gradient1 font-black">
<span className="text-stamp-grey-light font-light">
<div class="flex flex-col w-full">
<p class="text-3xl mobileLg:text-4xl gray-gradient1 font-black">
<span class="text-stamp-grey-light font-light">
#
</span>
{stamp.stamp}
</p>

<div className="flex flex-row pt-3 w-full justify-between items-center">
<div className="flex flex-col items-start -space-y-0.5">
<p className="text-xl mobileLg:text-2xl font-bold text-stamp-grey">
<div class="flex flex-row pt-3 w-full justify-between items-center">
<div class="flex flex-col items-start -space-y-0.5">
<p class="text-xl mobileLg:text-2xl font-bold text-stamp-grey">
EDITIONS
</p>
<p className="text-sm mobileLg:text-base font-medium text-stamp-grey-darker">
<p class="text-sm mobileLg:text-base font-medium text-stamp-grey-darker">
MAX {maxQuantity}
</p>
</div>
<div className="flex flex-col items-end">
<div class="flex flex-col items-end">
<input
type="number"
min="1"
max={maxQuantity}
value={quantity}
onChange={handleQuantityChange}
className={`${inputField} !w-12 text-center`}
class={`${inputField} !w-12 text-center`}
/>
</div>
</div>
Expand All @@ -193,15 +193,15 @@ const StampBuyModal = ({
onSubmit={handleBuyClick}
onCancel={toggleModal}
buttonName="BUY"
className="pt-9 mobileLg:pt-12"
class="pt-9 mobileLg:pt-12"
userAddress={wallet?.address}
inputType="P2WPKH"
outputTypes={["P2WPKH"]}
/>

{error && <div className="text-red-500 mt-2">{error}</div>}
{error && <div class="text-red-500 mt-2">{error}</div>}
{successMessage && (
<div className="text-green-500 mt-2">{successMessage}</div>
<div class="text-green-500 mt-2">{successMessage}</div>
)}
</ModalLayout>
);
Expand Down
6 changes: 3 additions & 3 deletions islands/stamp/details/StampTextContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ export default function TextContentIsland({ src }: { src: string }) {
.catch((e) => setError(`Error loading content: ${e.message}`));
}, [src]);

if (error) return <div className="text-red-500">Error: {error}</div>;
if (error) return <div class="text-red-500">Error: {error}</div>;

return (
<div className="w-full h-full overflow-auto p-4 text-sm !text-gray-500 flex items-center justify-center">
<pre className="whitespace-pre-wrap break-words max-w-full">{content}</pre>
<div class="w-full h-full overflow-auto p-4 text-sm !text-gray-500 flex items-center justify-center">
<pre class="whitespace-pre-wrap break-words max-w-full">{content}</pre>
</div>
);
}

0 comments on commit c54d375

Please sign in to comment.