How to provide size variant based on media query without using javascript?

[lorcan-codes]

If we want to provide different size variants (sm, md, lg) depending on window size, we have to track window size changes

const isMobile = useMediaQuery("max-width : 768px")

return <Button size={isMobile? "sm": "md"}>My button</Button>

But this approach requires using client side component and tracking window size. I wonder if there is any way to make this work in server components and without tracking window size