def space_html_block(space_info) -> str:
	url = space_info.url

	return f"""
    <article class="">
	<a href="{url}" class="relative z-0 mx-auto flex flex-col items-center justify-center bg-gradient-to-br p-4 filter from-blue-600 to-blue-600 overflow-hidden hover:brightness-110 h-40 rounded-lg">
	    <div class="absolute left-0 top-0 h-24 w-1/2 bg-gradient-to-br from-black/20 via-transparent to-transparent"></div>
		<div class="absolute flex items-center rounded-xl top-2.5 right-4 text-sm"><svg class="mr-1.5 text-white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" fill="currentColor"><path d="M22.45,6a5.47,5.47,0,0,1,3.91,1.64,5.7,5.7,0,0,1,0,8L16,26.13,5.64,15.64a5.7,5.7,0,0,1,0-8,5.48,5.48,0,0,1,7.82,0L16,10.24l2.53-2.58A5.44,5.44,0,0,1,22.45,6m0-2a7.47,7.47,0,0,0-5.34,2.24L16,7.36,14.89,6.24a7.49,7.49,0,0,0-10.68,0,7.72,7.72,0,0,0,0,10.82L16,29,27.79,17.06a7.72,7.72,0,0,0,0-10.82A7.49,7.49,0,0,0,22.45,4Z"></path></svg>
        <span class="text-white">22</span></div>
		<div class="absolute opacity-60 text-6xl mb-1 drop-shadow-xl">{icons}</div>
		<h4 class="z-40 max-w-full truncate text-center font-bold leading-tight text-blue-50 text-xl " style="text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);">{name}</h4>
		</a>
    """

def model_hyperlink(link, model_name):
    return f'<a target="_blank" href="{link}" style="color: var(--link-text-color); text-decoration: underline;text-decoration-style: dotted;">{model_name}</a>'


def make_clickable(space):
    link = f"https://huggingface.co/spaces/{space}"

    return model_hyperlink(link, space)