[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
add link card
+217
-33
12 changed files
.changeset
apps
docs
src
lib
cards
site-components
routes
(main)
components
social
link-card
packages
core
src
lib
components
button
social
src
lib
components
link-card
+5
.changeset/rotten-lights-hug.md
+5
.changeset/rotten-lights-hug.md
+5
.changeset/spotty-geckos-add.md
+5
.changeset/spotty-geckos-add.md
+6
apps/docs/src/lib/site-components/components_social.ts
+6
apps/docs/src/lib/site-components/components_social.ts
···
6
6
import CardStarRating from '$lib/cards/social/CardStarRating.svelte';
7
7
import CardEmojiPicker from '$lib/cards/social/CardEmojiPicker.svelte';
8
8
import CardSocialPost from '$lib/cards/social/CardSocialPost.svelte';
9
9
+
import CardLinkCard from '$lib/cards/social/CardLinkCard.svelte';
9
10
10
11
export const socialComponents: ComponentCard[] = [
11
12
{
···
42
43
component: CardSocialPost,
43
44
label: 'Social Media Post',
44
45
href: 'post'
46
46
+
},
47
47
+
{
48
48
+
component: CardLinkCard,
49
49
+
label: 'Link Card',
50
50
+
href: 'link-card'
45
51
}
46
52
].sort((a, b) => a.label.localeCompare(b.label));
+1
packages/social/src/lib/components/index.ts
+1
packages/social/src/lib/components/index.ts
+29
-30
apps/docs/src/lib/cards/social/CardBlueskyLogin.svelte
+29
-30
apps/docs/src/lib/cards/social/CardBlueskyLogin.svelte
···
2
2
import { Subheading, Label, Input, Button } from '@foxui/all';
3
3
</script>
4
4
5
5
-
<div class="flex items-start flex-col">
6
6
-
<Subheading class="mb-1 inline-flex items-center gap-2 text-xl font-bold">
7
7
-
<svg
8
8
-
fill="currentColor"
9
9
-
xmlns="http://www.w3.org/2000/svg"
10
10
-
viewBox="-40 -40 680 620"
11
11
-
version="1.1"
12
12
-
class={['text-accent-600 dark:text-accent-400 size-6']}
13
13
-
aria-hidden="true"
5
5
+
<div class="flex flex-col items-start">
6
6
+
<Subheading class="mb-1 inline-flex items-center gap-2 text-xl font-bold">
7
7
+
<svg
8
8
+
fill="currentColor"
9
9
+
xmlns="http://www.w3.org/2000/svg"
10
10
+
viewBox="-40 -40 680 620"
11
11
+
version="1.1"
12
12
+
class={['text-accent-600 dark:text-accent-400 size-6']}
13
13
+
aria-hidden="true"
14
14
+
>
15
15
+
<path
16
16
+
d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
17
17
+
/>
18
18
+
</svg>
19
19
+
Login with Bluesky</Subheading
14
20
>
15
15
-
<path
16
16
-
d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
17
17
-
/>
18
18
-
</svg>
19
19
-
Login with Bluesky</Subheading
20
20
-
>
21
21
22
22
-
<div class="mt-2 w-full">
23
23
-
<Label for="bluesky-handle" class="text-sm">Your handle</Label>
24
24
-
<div class="mt-2">
25
25
-
<Input
26
26
-
sizeVariant="sm"
27
27
-
type="text"
28
28
-
name="bluesky-handle"
29
29
-
id="bluesky-handle"
30
30
-
placeholder="yourname.bsky.social"
31
31
-
class="w-full"
32
32
-
/>
22
22
+
<div class="mt-2 w-full">
23
23
+
<Label for="bluesky-handle" class="text-sm">Your handle</Label>
24
24
+
<div class="mt-2">
25
25
+
<Input
26
26
+
sizeVariant="sm"
27
27
+
type="text"
28
28
+
name="bluesky-handle"
29
29
+
id="bluesky-handle"
30
30
+
placeholder="yourname.bsky.social"
31
31
+
class="w-full"
32
32
+
/>
33
33
+
</div>
33
34
</div>
35
35
+
36
36
+
<Button type="submit" size="sm" class="ml-auto mt-2 w-full md:w-auto">{'Login'}</Button>
34
37
</div>
35
35
-
36
36
-
<Button type="submit" size="sm" class="ml-auto mt-2 w-full md:w-auto">{'Login'}</Button>
37
37
-
38
38
-
</div>
+14
apps/docs/src/lib/cards/social/CardLinkCard.svelte
+14
apps/docs/src/lib/cards/social/CardLinkCard.svelte
···
1
1
+
<script>
2
2
+
import { LinkCard } from '@foxui/all';
3
3
+
</script>
4
4
+
5
5
+
<div class="flex h-full w-full items-center justify-center">
6
6
+
<div class="scale-85 w-full">
7
7
+
<LinkCard
8
8
+
meta={{
9
9
+
title: "hi, i'm florian",
10
10
+
image: 'https://flo-bit.dev/og.jpg'
11
11
+
}}
12
12
+
/>
13
13
+
</div>
14
14
+
</div>
+2
-3
packages/core/src/lib/components/button/Button.svelte
+2
-3
packages/core/src/lib/components/button/Button.svelte
···
65
65
WithElementRef<HTMLAnchorAttributes> & {
66
66
variant?: ButtonVariant;
67
67
size?: ButtonSize;
68
68
-
checkCurrent?: boolean;
69
68
};
70
69
</script>
71
70
···
85
84
{#if href}
86
85
<a
87
86
bind:this={ref}
88
88
-
class={cn('rounded-box', buttonVariants({ variant, size }), className)}
87
87
+
class={cn(buttonVariants({ variant, size }), className)}
89
88
{href}
90
89
{...restProps}
91
90
>
···
94
93
{:else}
95
94
<button
96
95
bind:this={ref}
97
97
-
class={cn('rounded-box', buttonVariants({ variant, size }), className)}
96
96
+
class={cn(buttonVariants({ variant, size }), className)}
98
97
{type}
99
98
{...restProps}
100
99
>
+106
packages/social/src/lib/components/link-card/LinkCard.svelte
+106
packages/social/src/lib/components/link-card/LinkCard.svelte
···
1
1
+
<script lang="ts" module>
2
2
+
import type { WithElementRef } from 'bits-ui';
3
3
+
import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
4
4
+
import { cn } from '@foxui/core';
5
5
+
6
6
+
export type LinkCardProps = WithElementRef<HTMLAttributes<HTMLDivElement>> &
7
7
+
WithElementRef<HTMLAnchorAttributes> & {
8
8
+
showMedia?: boolean;
9
9
+
showDescription?: boolean;
10
10
+
showTitle?: boolean;
11
11
+
showDomain?: boolean;
12
12
+
showGradient?: boolean;
13
13
+
14
14
+
meta: {
15
15
+
title: string;
16
16
+
description?: string;
17
17
+
18
18
+
image?: string;
19
19
+
imageAlt?: string;
20
20
+
21
21
+
video?: string;
22
22
+
videoType?: string;
23
23
+
};
24
24
+
};
25
25
+
</script>
26
26
+
27
27
+
<script lang="ts">
28
28
+
let {
29
29
+
class: className,
30
30
+
ref = $bindable(null),
31
31
+
href,
32
32
+
33
33
+
target = '_blank',
34
34
+
35
35
+
showMedia = true,
36
36
+
showDescription = false,
37
37
+
showTitle = true,
38
38
+
showDomain = true,
39
39
+
showGradient = true,
40
40
+
41
41
+
meta,
42
42
+
43
43
+
children,
44
44
+
...restProps
45
45
+
}: LinkCardProps = $props();
46
46
+
</script>
47
47
+
48
48
+
<div
49
49
+
bind:this={ref}
50
50
+
class={cn(
51
51
+
'not-prose border-base-300 dark:border-base-900 bg-base-200/50 dark:bg-base-950/50 group relative isolate my-6 flex aspect-[1200/630] max-w-lg flex-col justify-end overflow-hidden rounded-2xl border p-4',
52
52
+
'focus-within:outline-accent-500 focus-within:outline-2 focus-within:outline-offset-2',
53
53
+
className
54
54
+
)}
55
55
+
{..}
56
56
+
{...ops}
57
57
+
>
58
58
+
{}
59
59
+
>
60
60
+
{#if dia}
61
61
+
{#}{#if ideo && meta.videoType}
62
62
+
<}<video
63
63
+
autoplay
64
64
+
loop
65
65
+
muted
66
66
+
preload="metadata"
67
67
+
width="1200"
68
68
+
height="630"
69
69
+
class="absolute inset-0 -z-10 h-full w-full rounded-2xl object-cover"
70
70
+
>
71
71
+
<source src={ideo} type} type={ideoType} />
72
72
+
} />
73
73
+
</video>{:else if mage}
74
74
+
<}<img
75
75
+
src={mage}
76
76
+
}
77
77
+
alt={mageAlt || ''}
78
78
+
}
79
79
+
width="1200"
80
80
+
height="630"
81
81
+
class="group-hover:scale-102 absolute inset-0 -z-10 h-full w-full rounded-2xl object-cover transition-all duration-300 ease-in-out"
82
82
+
/>{/if}{/if}
83
83
+
84
84
+
{#if adient}
85
85
+
<d}<div
86
86
+
class="from-base-200/90 to-base-200/40 dark:from-base-950 dark:to-base-950/60 absolute inset-0 -z-10 rounded-xl bg-gradient-to-t"
87
87
+
></div>{/if}
88
88
+
89
89
+
{#if main}
90
90
+
<d}<div class="dark:text-accent-400 text-accent-600 text-xs font-semibold">
91
91
+
{ new URL(href).hostname.replace('www.', '') : ''}
92
92
+
</}
93
93
+
</div>{/if}
94
94
+
95
95
+
<div class="text-base-950 dark:text-base-50 mt-2 text-lg font-semibold">
96
96
+
<a {href} {target} class="focus:outline-none">
97
97
+
<span class="absolute inset-0"></span>
98
98
+
<div class={tle ? '' : 'sr-only'}>{met}>{title ?? href}</div}</div>
99
99
+
</a>
100
100
+
</div>
101
101
+
{#if scription}
102
102
+
<d}<div class="dark:text-base-400 text-base-700 mt-1 line-clamp-2 text-xs/5">
103
103
+
{description ?? ''}
104
104
+
</}
105
105
+
</div>{/if}
106
106
+
</div>
+1
packages/social/src/lib/components/link-card/index.ts
+1
packages/social/src/lib/components/link-card/index.ts
···
1
1
+
export { default as LinkCard } from './LinkCard.svelte';
+8
apps/docs/src/routes/(main)/components/social/link-card/+page.svelte
+8
apps/docs/src/routes/(main)/components/social/link-card/+page.svelte
+13
apps/docs/src/routes/(main)/components/social/link-card/Example.svelte
+13
apps/docs/src/routes/(main)/components/social/link-card/Example.svelte
···
1
1
+
<script lang="ts">
2
2
+
import { LinkCard } from '@foxui/all';
3
3
+
</script>
4
4
+
5
5
+
<LinkCard
6
6
+
meta={{
7
7
+
title: "hi, i'm florian",
8
8
+
description:
9
9
+
"hello world! this is my personal website. i'm florian, a full-stack software engineer based in berlin.",
10
10
+
image: 'https://flo-bit.dev/og.jpg'
11
11
+
}}
12
12
+
href="https://www.flo-bit.dev"
13
13
+
/>
+27
apps/docs/src/routes/(main)/components/social/link-card/LinkCard.md
+27
apps/docs/src/routes/(main)/components/social/link-card/LinkCard.md
···
1
1
+
<script lang="ts">
2
2
+
import LinkCardExample from './Example.svelte';
3
3
+
</script>
4
4
+
5
5
+
# Link Card
6
6
+
7
7
+
## Example
8
8
+
9
9
+
<LinkCardExample />
10
10
+
11
11
+
## Usage
12
12
+
13
13
+
```svelte
14
14
+
<script lang="ts">
15
15
+
import { LinkCard } from '@foxui/social';
16
16
+
</script>
17
17
+
18
18
+
<LinkCard
19
19
+
meta={{
20
20
+
title: "hi, i'm florian",
21
21
+
description:
22
22
+
"hello world! this is my personal website. i'm florian, a full-stack software engineer based in berlin.",
23
23
+
image: 'https://flo-bit.dev/og.jpg'
24
24
+
}}
25
25
+
href="https://www.flo-bit.dev"
26
26
+
/>
27
27
+
```