@foxui/social 0.4.4 → 0.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/link-card/LinkCard.svelte +104 -0
- package/dist/components/link-card/LinkCard.svelte.d.ts +20 -0
- package/dist/components/link-card/index.d.ts +1 -0
- package/dist/components/link-card/index.js +1 -0
- package/package.json +3 -3
package/dist/components/index.js
CHANGED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { WithElementRef } from 'bits-ui';
|
|
3
|
+
import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
import { cn } from '@foxui/core';
|
|
5
|
+
|
|
6
|
+
export type LinkCardProps = WithElementRef<HTMLAttributes<HTMLDivElement>> &
|
|
7
|
+
WithElementRef<HTMLAnchorAttributes> & {
|
|
8
|
+
showMedia?: boolean;
|
|
9
|
+
showDescription?: boolean;
|
|
10
|
+
showTitle?: boolean;
|
|
11
|
+
showDomain?: boolean;
|
|
12
|
+
showGradient?: boolean;
|
|
13
|
+
|
|
14
|
+
meta: {
|
|
15
|
+
title: string;
|
|
16
|
+
description?: string;
|
|
17
|
+
|
|
18
|
+
image?: string;
|
|
19
|
+
imageAlt?: string;
|
|
20
|
+
|
|
21
|
+
video?: string;
|
|
22
|
+
videoType?: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<script lang="ts">
|
|
28
|
+
let {
|
|
29
|
+
class: className,
|
|
30
|
+
ref = $bindable(null),
|
|
31
|
+
href,
|
|
32
|
+
|
|
33
|
+
target = '_blank',
|
|
34
|
+
|
|
35
|
+
showMedia = true,
|
|
36
|
+
showDescription = false,
|
|
37
|
+
showTitle = true,
|
|
38
|
+
showDomain = true,
|
|
39
|
+
showGradient = true,
|
|
40
|
+
|
|
41
|
+
meta,
|
|
42
|
+
|
|
43
|
+
children,
|
|
44
|
+
...restProps
|
|
45
|
+
}: LinkCardProps = $props();
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<div
|
|
49
|
+
bind:this={ref}
|
|
50
|
+
class={cn(
|
|
51
|
+
'not-prose group 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
|
+
'focus-within:outline-accent-500 focus-within:outline-2 focus-within:outline-offset-2',
|
|
53
|
+
className
|
|
54
|
+
)}
|
|
55
|
+
{...restProps}
|
|
56
|
+
>
|
|
57
|
+
{#if showMedia}
|
|
58
|
+
{#if meta.video && meta.videoType}
|
|
59
|
+
<video
|
|
60
|
+
autoplay
|
|
61
|
+
loop
|
|
62
|
+
muted
|
|
63
|
+
preload="metadata"
|
|
64
|
+
width="1200"
|
|
65
|
+
height="630"
|
|
66
|
+
class="absolute inset-0 -z-10 h-full w-full rounded-2xl object-cover"
|
|
67
|
+
>
|
|
68
|
+
<source src={meta.video} type={meta.videoType} />
|
|
69
|
+
</video>
|
|
70
|
+
{:else if meta.image}
|
|
71
|
+
<img
|
|
72
|
+
src={meta.image}
|
|
73
|
+
alt={meta.imageAlt || ''}
|
|
74
|
+
width="1200"
|
|
75
|
+
height="630"
|
|
76
|
+
class="absolute inset-0 -z-10 h-full w-full rounded-2xl object-cover group-hover:scale-102 transition-all duration-300 ease-in-out"
|
|
77
|
+
/>
|
|
78
|
+
{/if}
|
|
79
|
+
{/if}
|
|
80
|
+
|
|
81
|
+
{#if showGradient}
|
|
82
|
+
<div
|
|
83
|
+
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"
|
|
84
|
+
></div>
|
|
85
|
+
{/if}
|
|
86
|
+
|
|
87
|
+
{#if showDomain}
|
|
88
|
+
<div class="dark:text-accent-400 text-accent-600 text-xs font-semibold">
|
|
89
|
+
{href ? new URL(href).hostname.replace('www.', '') : ''}
|
|
90
|
+
</div>
|
|
91
|
+
{/if}
|
|
92
|
+
|
|
93
|
+
<div class="text-base-950 dark:text-base-50 mt-2 text-lg font-semibold">
|
|
94
|
+
<a {href} {target} class="focus:outline-none">
|
|
95
|
+
<span class="absolute inset-0"></span>
|
|
96
|
+
<div class={showTitle ? '' : 'sr-only'}>{meta?.title ?? href}</div>
|
|
97
|
+
</a>
|
|
98
|
+
</div>
|
|
99
|
+
{#if showDescription}
|
|
100
|
+
<div class="dark:text-base-400 text-base-700 mt-1 line-clamp-2 text-xs/5">
|
|
101
|
+
{meta?.description ?? ''}
|
|
102
|
+
</div>
|
|
103
|
+
{/if}
|
|
104
|
+
</div>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { WithElementRef } from 'bits-ui';
|
|
2
|
+
import type { HTMLAnchorAttributes, HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
export type LinkCardProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & WithElementRef<HTMLAnchorAttributes> & {
|
|
4
|
+
showMedia?: boolean;
|
|
5
|
+
showDescription?: boolean;
|
|
6
|
+
showTitle?: boolean;
|
|
7
|
+
showDomain?: boolean;
|
|
8
|
+
showGradient?: boolean;
|
|
9
|
+
meta: {
|
|
10
|
+
title: string;
|
|
11
|
+
description?: string;
|
|
12
|
+
image?: string;
|
|
13
|
+
imageAlt?: string;
|
|
14
|
+
video?: string;
|
|
15
|
+
videoType?: string;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
declare const LinkCard: import("svelte").Component<LinkCardProps, {}, "ref">;
|
|
19
|
+
type LinkCard = ReturnType<typeof LinkCard>;
|
|
20
|
+
export default LinkCard;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as LinkCard } from './LinkCard.svelte';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as LinkCard } from './LinkCard.svelte';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@foxui/social",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.4.
|
|
4
|
+
"version": "0.4.5",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"hls.js": "^1.6.2",
|
|
51
51
|
"is-emoji-supported": "^0.0.5",
|
|
52
52
|
"plyr": "^3.7.8",
|
|
53
|
-
"@foxui/core": "0.4.
|
|
54
|
-
"@foxui/time": "0.4.
|
|
53
|
+
"@foxui/core": "0.4.5",
|
|
54
|
+
"@foxui/time": "0.4.5"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
57
|
"svelte": ">=5",
|