src/components/PluginResultCard.vue

<script setup lang="ts">
import defaultImage from '@/assets/img/placeholder-loading.jpg';
import { computed, onMounted } from 'vue';
import Icon from "@/components/Icon.vue";

// Props with TypeScript interfaces
interface Props {
    sources: any[];
    thumbnail: string;
    data: Record<string, any>;
    gridItem?: boolean;
}

const props = defineProps<Props>();

// Computed properties
const domain = computed(() => {
    const newDomain = props.sources[0].domain.split('://')[1];
    return newDomain.replace('www.', '');
});

const categoryClass = computed(() => `result-card--${props.data.category}`);

// Methods
const loadImage = (url: string) => {
    return url ?? defaultImage;
};

</script>

<template>
    <div
        class="result-card"
        :class="categoryClass"
        :grid-item="gridItem"
    >
        <div class="result-card-thumbnail">
            <div
                ref="resultImageWrapper"
                class="result-image-wrapper"
                :style="{ '--blur-image-url': `url(${thumbnail}` }"
            >
                <img ref="resultImage" class="result-image" :src="loadImage(thumbnail)" />
            </div>
            <div class="domain">
                <img class="corner-top-left" src="@/assets/svg/corner.svg" />
                <img class="corner-bottom-right" src="@/assets/svg/corner.svg" />
                <div
                    class="domain-details"
                >
                    <icon class="category-icon" :name="`categories-${data.category}`" />
                    <p>{{ domain }}</p>
                </div>

            </div>
        </div>
        <div
            class="title-container">
            <p class="title">
                {{ sources[0].title }}
            </p>
        </div>
    </div>
</template>

<style scoped lang="scss">
@import "@/assets/colors";
@import "@/assets/mixins";

$footer-height: 16px;
$footer-gt: 8px; // col gap of footer
$footer-thumb-padding: 4px; //area between footer and image

.result-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    position: relative;
    cursor: pointer;
    border-radius: 10px;

    .category-icon {
        width: 16px;
        height: 16px;
    }

    &--people {
        .category-icon {
            fill: $people-900;
        }
    }

    &--places {
        .category-icon {
            fill: $places-900;
        }
    }

    &--duplicates {
        fill: $duplicates-900;
        .category-icon {
            fill: $duplicates-900;
        }
    }

    &--related {
        .category-icon {
            fill: $related-900;
        }
    }

    &--similar {
        .category-icon {
            fill: $similar-900;
        }
    }

    .source-link {
        @include regular-14-16;
        overflow: hidden;
        line-height: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: $main-900;
        text-decoration: none;
    }

    > .result-card-thumbnail {
        border: 2px solid transparent;
        border-radius: 10px;

        height: 100%;

        &.locked {
            position: relative;

            > .overlay {
                display: block;
                z-index: 1;
                width: 100%;
                height: 100%;
                border-radius: 6px;
                position: absolute;
            }
        }


        >.new-count-thumbnail {
            position: absolute;
            right: 5px;
            bottom: 5px;
            z-index: 1;

        }
    }

    .source-link {
        @include regular-14-16;
        overflow: hidden;
        line-height: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: $main-900;
        text-decoration: none;
    }

    > .title-container {
        display: flex;
        align-items: center;
        column-gap: 4px;
        max-width: 200px;

        &.locked {
            > .title {
                -webkit-filter: blur(2px);
                -moz-filter: blur(2px);
                -o-filter: blur(2px);
                -ms-filter: blur(2px);
                filter: blur(2px);
            }

            > .count {
                display: none;
            }
        }

        > .title {
            @include regular-14-16;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: $main-900;
            line-height: 18px;
            //flex-grow: 1;
        }



    }

    //&[is-focused="true"] {
    //    > .result-card-thumbnail {
    //        border-color: $primary-300;
    //    }
    //
    //    .domain {
    //        &-details {
    //            padding-left: 4px;
    //            padding-bottom: 4px;
    //        }
    //    }
    //}

    &[grid-item="true"] {
        .result-image {
            //max-height: 256px;
            height: auto;
        }

        /*.image-fit-card {
            //max-height: fit-content;
            max-height: 100%;
            //height: 100%;
        }*/

        .result-image-wrapper {
            cursor: pointer;
        }


    }

    &-thumbnail {
        position: relative;

        .result-image {
            //width: 100%;
        }
    }

    &:hover {
        .result-image-wrapper {
            box-shadow: 0px 2px 8px 2px rgba(28, 30, 37, 0.2);
        }

        .domain {
            &-details {
                padding-left: 4px;
                padding-bottom: 4px;
            }
        }
    }

    .result-image {
        width: 100%;
        max-height: 230px;
        max-width: 256px;
        object-fit: contain;
        z-index: 10;
        overflow: hidden;
    }

    .result-image-wrapper {
        display: flex;
        align-items: center;
        background-repeat: no-repeat;
        border-radius: 8px 8px 8px 10px;
        overflow: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);

        //max-height: 196px;
        height: 100%;

        align-items: center;
        justify-content: center;

        &:before {
            content: var(--blur-image-url, none);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            background-position: center;
            background-image: var(--blur-image-url, none);
            filter: blur(20px);
        }
    }

    .result-image {
        //width: 100%;
    }
}

.debug-container {
    position: absolute;
    top: -30px;

    &-group {
        position: absolute;
        top: -36px;
        left: 4px;
    }
}

.domain {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: absolute;
    bottom: 0px;

    > .corner-bottom-right {
        position: absolute;
        bottom: 0px;
        right: -8px;
    }

    > .corner-top-left {
        position: absolute;
        top: -$footer-gt;
        left: -0;
    }

    &-details {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px 0px 0px;
        backdrop-filter: blur(4px);
        background-color: $main-00;
        border-radius: 0px 8px 0px 8px;
        position: relative;
        transition: all .2s ease-in-out;

        &::after {
            content: "";
            position: absolute;
            top: 0px;
            left: 0px;
            background-image: url('@/assets/svg/corner.svg');
            background-repeat: no-repeat;
        }

        &::before {
            content: "";
            position: absolute;
            bottom: 0px;
            right: 0px;
            background-image: url('@/assets/svg/corner.svg');
            background-repeat: no-repeat;
        }

        > .domain-icon {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            overflow: hidden;
        }

        p {
            $color: $main-1000;
            @include medium-12-12;
            max-width: 200px;
            cursor: pointer;
            line-height: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            @media (max-width: $mobile-480-breakpoint) {
                max-width: 110px;
            }
        }
    }

    > button {
        position: absolute;
        top: -25px;
        left: $footer-thumb-padding;
    }
}

.debug-btn {
    @include button-debug();
}
</style>