Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-09 15:05:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve link style

Browse Source
This commit is contained in:
Sonny
2024-11-03 16:06:36 +01:00
committed by Sonny
parent bcad333783
commit 01a21ddef8
3 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
inertia/components/dashboard/link/link.module.css
View File

@@ -37,8 +37,14 @@
white-space: nowrap;
overflow: hidden;
font-size: 0.8em;
transition: opacity 0.3s;
}
.linkWrapper:hover .linkUrlPathname {
opacity: 1;
}
.linkUrlPathname {
opacity: 0;
transition: opacity 0.3s;
}

20
inertia/components/dashboard/link/link_item.tsx
View File

@@ -1,4 +1,4 @@
import { Card, Group, Text } from '@mantine/core'; // Import de Mantine
import { Card, Group, Text } from '@mantine/core';
import { AiFillStar } from 'react-icons/ai';
import { ExternalLinkStyled } from '~/components/common/external_link_styled';
import LinkFavicon from '~/components/dashboard/link/link_favicon';
@@ -14,18 +14,12 @@ export default function LinkItem({
}) {
const { name, url, description, favorite } = link;
return (
<Card
className={styles.linkWrapper}
padding="xs"
pl="md"
pr="md"
radius="sm"
>
<Group className={styles.linkHeader} justify="space-between">
<Card className={styles.linkWrapper} padding="sm" radius="sm" withBorder>
<Group className={styles.linkHeader} justify="center">
<LinkFavicon url={url} />
<ExternalLinkStyled href={url} style={{ flex: 1 }}>
<div className={styles.linkName}>
<Text c="blue" lineClamp={1}>
<Text lineClamp={1}>
{name}{' '}
{showUserControls && favorite && <AiFillStar color="gold" />}
</Text>
@@ -35,7 +29,7 @@ export default function LinkItem({
{/* {showUserControls && <LinkControls link={link} />} */}
</Group>
{description && (
<Text c="dimmed" size="sm">
<Text className={styles.linkDescription} c="dimmed" size="sm">
{description}
</Text>
)}
@@ -60,7 +54,7 @@ function LinkItemURL({ url }: { url: Link['url'] }) {
}
return (
<Text className={styles.linkUrl} c="gray" size="xs" lineClamp={1}>
<Text className={styles.linkUrl} color="gray" size="xs" lineClamp={1}>
{origin}
<span className={styles.linkUrlPathname}>{text}</span>
</Text>
@@ -68,7 +62,7 @@ function LinkItemURL({ url }: { url: Link['url'] }) {
} catch (error) {
console.error('error', error);
return (
<Text className={styles.linkUrl} c="gray" size="xs" lineClamp={1}>
<Text className={styles.linkUrl} color="gray" size="xs" lineClamp={1}>
{url}
</Text>
);