info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-03 06:12:53 +02:00
Code Issues Releases Wiki Activity

Library guides listing UI

Browse Source
This commit is contained in:
Kamran Ahmed
2025-06-19 01:36:27 +01:00
parent 42b4c0cf6d
commit 15f4a75523
2 changed files with 6 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/AIGuide/AIGuideCard.tsx
View File

@@ -22,9 +22,9 @@ export function AIGuideCard(props: AIGuideCardProps) {
<div className="relative flex flex-grow flex-col">
<a
href={`/ai/guide/${guide.slug}`}
className="group relative flex h-full min-h-[140px] w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 text-left hover:border-gray-300 hover:bg-gray-50"
className="group relative flex h-full min-h-[120px] w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-3 text-left hover:border-gray-300 hover:bg-gray-50 sm:p-4"
>
<div className="mb-4 flex items-center justify-between">
<div className="mb-2 flex items-center justify-between sm:mb-3">
<span
className={`rounded-full text-xs font-medium capitalize opacity-80 ${guideDepthColor}`}
>
@@ -32,13 +32,13 @@ export function AIGuideCard(props: AIGuideCardProps) {
</span>
</div>
<div className="relative max-h-[290px] min-h-[290px] overflow-y-hidden">
<div className="relative max-h-[180px] min-h-[140px] overflow-y-hidden sm:max-h-[200px] sm:min-h-[160px]">
<div
className="prose prose-sm prose-pre:bg-gray-100 [&_h1]:hidden [&_h1:first-child]:block [&_h1:first-child]:text-lg [&_h1:first-child]:font-bold [&_h1:first-child]:text-pretty [&_h2]:hidden [&_h3]:hidden [&_h4]:hidden [&_h5]:hidden [&_h6]:hidden"
className="prose prose-sm prose-pre:bg-gray-100 [&_h1]:hidden [&_h1:first-child]:block [&_h1:first-child]:text-base [&_h1:first-child]:font-bold [&_h1:first-child]:leading-[1.35] [&_h1:first-child]:text-pretty sm:[&_h1:first-child]:text-lg [&_h2]:hidden [&_h3]:hidden [&_h4]:hidden [&_h5]:hidden [&_h6]:hidden"
dangerouslySetInnerHTML={{ __html: guide.html }}
/>
<div className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-white to-transparent group-hover:from-gray-50" />
<div className="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-white to-transparent group-hover:from-gray-50 sm:h-16" />
</div>
</a>

10
src/components/AITutor/AITutorHeader.tsx
View File

@@ -1,5 +1,4 @@
import { useQuery } from '@tanstack/react-query';
import { AITutorLimits } from './AITutorLimits';
import { getAiCourseLimitOptions } from '../../queries/ai-course';
import { queryClient } from '../../stores/query-client';
import { useIsPaidUser } from '../../queries/billing';
@@ -30,16 +29,9 @@ export function AITutorHeader(props: AITutorHeaderProps) {
{subtitle && <p className="mb-4 text-sm text-gray-500">{subtitle}</p>}
</div>
<div className="flex flex-row items-center gap-2">
<AITutorLimits
used={used}
limit={limit}
isPaidUser={isPaidUser}
isPaidUserLoading={isPaidUserLoading}
onUpgradeClick={onUpgradeClick}
/>
<a
href="/ai"
className="flex flex-row items-center gap-2 rounded-lg bg-black px-4 py-2 text-sm font-medium text-white"
className="flex flex-row items-center gap-2 rounded-lg bg-black px-4 py-1.5 text-sm font-medium text-white"
>
<PlusIcon className="h-4 w-4" />
New