fix spacing for larger holdings amounts (#13)

Create a simple dynamic function to adjust display length based on USD
holding value to fix cents being cut off
Before:
<img width="962" height="768" alt="image"
src="https://github.com/user-attachments/assets/581bb82f-d8a4-4553-9ea9-098c3ca63329"
/>
After: 
<img width="1027" height="727" alt="image"
src="https://github.com/user-attachments/assets/6c5092a7-0102-446f-a509-0b979488c264"
/>
This commit is contained in:
Ryan Loomba 2025-07-17 12:22:07 -07:00 committed by GitHub
commit ddbc43bbf2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -33,13 +33,18 @@ function HomeContent() {
const searchParams = useSearchParams();
const router = useRouter();
// const displayLength = useDisplayLength();
const displayLength = 20; // Fallback to a fixed length for simplicity
const [bitcoinPrice, setBitcoinPrice] = useState(0);
const previousPriceRef = useRef(0);
const [priceDirection, setPriceDirection] = useState<string | null>(null);
const [holding] = useState(8584);
const [holdingValue, setHoldingValue] = useState(0);
// Calculate display length based on holding value
const getDisplayLength = (holdingValue: number) => {
return holdingValue >= 1000000000 ? 22 : 20; // 22 for 1B+, 20 for under
};
const displayLength = getDisplayLength(holdingValue);
const [currentRowIndex, setCurrentRowIndex] = useState(-1);
const [ticker, setTicker] = useState(searchParams.get("ticker") || "XYZ");
const [inputError, setInputError] = useState<string | null>(null);