Skip to content

Commit 30df76b

Browse files
waleedlatif1waleedlatif1
committed
small styling improvements
1 parent a401ada commit 30df76b

File tree

4 files changed

+117
-26
lines changed

4 files changed

+117
-26
lines changed

‎apps/sim/app/(landing)/studio/[slug]/back-link.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
'use client'
2+
3+
import { useState } from 'react'
4+
import { ArrowLeft, ChevronLeft } from 'lucide-react'
5+
import Link from 'next/link'
6+
7+
export function BackLink() {
8+
const [isHovered, setIsHovered] = useState(false)
9+
10+
return (
11+
<Link
12+
href='/studio'
13+
className='group flex items-center gap-1 text-gray-600 text-sm hover:text-gray-900'
14+
onMouseEnter={() => setIsHovered(true)}
15+
onMouseLeave={() => setIsHovered(false)}
16+
>
17+
<span className='group-hover:-translate-x-0.5 inline-flex transition-transform duration-200'>
18+
{isHovered ? (
19+
<ArrowLeft className='h-4 w-4' aria-hidden='true' />
20+
) : (
21+
<ChevronLeft className='h-4 w-4' aria-hidden='true' />
22+
)}
23+
</span>
24+
Back to Sim Studio
25+
</Link>
26+
)
27+
}

‎apps/sim/app/(landing)/studio/[slug]/page.tsx‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { FAQ } from '@/lib/blog/faq'
66
import { getAllPostMeta, getPostBySlug, getRelatedPosts } from '@/lib/blog/registry'
77
import { buildArticleJsonLd, buildBreadcrumbJsonLd, buildPostMetadata } from '@/lib/blog/seo'
88
import { soehne } from '@/app/_styles/fonts/soehne/soehne'
9+
import { BackLink } from '@/app/(landing)/studio/[slug]/back-link'
10+
import { ShareButton } from '@/app/(landing)/studio/[slug]/share-button'
911

1012
export async function generateStaticParams() {
1113
const posts = await getAllPostMeta()
@@ -48,9 +50,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
4850
/>
4951
<header className='mx-auto max-w-[1450px] px-6 pt-8 sm:px-8 sm:pt-12 md:px-12 md:pt-16'>
5052
<div className='mb-6'>
51-
<Link href='/studio' className='text-gray-600 text-sm hover:text-gray-900'>
52-
← Back to Sim Studio
53-
</Link>
53+
<BackLink />
5454
</div>
5555
<div className='flex flex-col gap-8 md:flex-row md:gap-12'>
5656
<div className='w-full flex-shrink-0 md:w-[450px]'>
@@ -75,28 +75,31 @@ export default async function Page({ params }: { params: Promise<{ slug: string
7575
>
7676
{post.title}
7777
</h1>
78-
<div className='mt-4 flex items-center gap-3'>
79-
{(post.authors || [post.author]).map((a, idx) => (
80-
<div key={idx} className='flex items-center gap-2'>
81-
{a?.avatarUrl ? (
82-
<Avatar className='size-6'>
83-
<AvatarImage src={a.avatarUrl} alt={a.name} />
84-
<AvatarFallback>{a.name.slice(0, 2)}</AvatarFallback>
85-
</Avatar>
86-
) : null}
87-
<Link
88-
href={a?.url || '#'}
89-
target='_blank'
90-
rel='noopener noreferrer author'
91-
className='text-[14px] text-gray-600 leading-[1.5] hover:text-gray-900 sm:text-[16px]'
92-
itemProp='author'
93-
itemScope
94-
itemType='https://schema.org/Person'
95-
>
96-
<span itemProp='name'>{a?.name}</span>
97-
</Link>
98-
</div>
99-
))}
78+
<div className='mt-4 flex items-center justify-between'>
79+
<div className='flex items-center gap-3'>
80+
{(post.authors || [post.author]).map((a, idx) => (
81+
<div key={idx} className='flex items-center gap-2'>
82+
{a?.avatarUrl ? (
83+
<Avatar className='size-6'>
84+
<AvatarImage src={a.avatarUrl} alt={a.name} />
85+
<AvatarFallback>{a.name.slice(0, 2)}</AvatarFallback>
86+
</Avatar>
87+
) : null}
88+
<Link
89+
href={a?.url || '#'}
90+
target='_blank'
91+
rel='noopener noreferrer author'
92+
className='text-[14px] text-gray-600 leading-[1.5] hover:text-gray-900 sm:text-[16px]'
93+
itemProp='author'
94+
itemScope
95+
itemType='https://schema.org/Person'
96+
>
97+
<span itemProp='name'>{a?.name}</span>
98+
</Link>
99+
</div>
100+
))}
101+
</div>
102+
<ShareButton url={`https://sim.ai/studio/${slug}`} title={post.title} />
100103
</div>
101104
</div>
102105
</div>

‎apps/sim/app/(landing)/studio/[slug]/share-button.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
'use client'
2+
3+
import { useState } from 'react'
4+
import { Share2 } from 'lucide-react'
5+
import { Popover, PopoverContent, PopoverItem, PopoverTrigger } from '@/components/emcn'
6+
7+
interface ShareButtonProps {
8+
url: string
9+
title: string
10+
}
11+
12+
export function ShareButton({ url, title }: ShareButtonProps) {
13+
const [open, setOpen] = useState(false)
14+
const [copied, setCopied] = useState(false)
15+
16+
const handleCopyLink = async () => {
17+
await navigator.clipboard.writeText(url)
18+
setCopied(true)
19+
setTimeout(() => {
20+
setCopied(false)
21+
setOpen(false)
22+
}, 1000)
23+
}
24+
25+
const handleShareTwitter = () => {
26+
const tweetUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`
27+
window.open(tweetUrl, '_blank', 'noopener,noreferrer')
28+
setOpen(false)
29+
}
30+
31+
const handleShareLinkedIn = () => {
32+
const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`
33+
window.open(linkedInUrl, '_blank', 'noopener,noreferrer')
34+
setOpen(false)
35+
}
36+
37+
return (
38+
<Popover
39+
open={open}
40+
onOpenChange={setOpen}
41+
variant='secondary'
42+
size='sm'
43+
colorScheme='inverted'
44+
>
45+
<PopoverTrigger asChild>
46+
<button
47+
className='flex items-center gap-1.5 text-gray-600 text-sm hover:text-gray-900'
48+
aria-label='Share this post'
49+
>
50+
<Share2 className='h-4 w-4' />
51+
<span>Share</span>
52+
</button>
53+
</PopoverTrigger>
54+
<PopoverContent align='end' minWidth={140}>
55+
<PopoverItem onClick={handleCopyLink}>{copied ? 'Copied!' : 'Copy link'}</PopoverItem>
56+
<PopoverItem onClick={handleShareTwitter}>Share on X</PopoverItem>
57+
<PopoverItem onClick={handleShareLinkedIn}>Share on LinkedIn</PopoverItem>
58+
</PopoverContent>
59+
</Popover>
60+
)
61+
}

‎apps/sim/content/blog/v0-5/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,6 @@ Model selection is per-block, so you can use faster/cheaper models for simple ta
196196

197197
## Get Started
198198

199-
Available now at [sim.ai](https://sim.ai). Check out the [documentation](https://docs.sim.ai) to dive deeper.
199+
Available now at [sim.ai](https://sim.ai). Check out the [docs](https://docs.sim.ai) to dive deeper.
200200

201201
*Questions? [help@sim.ai](mailto:help@sim.ai) · [Discord](https://sim.ai/discord)*

0 commit comments

Comments
 (0)