Power tips

<script setup>
import Icon from '@/components/Icon.vue'

const props = defineProps({
    tip:    { type: Object, required: true },    // one entry from powerTips
    format: { type: String, default: 'sidebar' }
});
</script>

<template>
    <div class="power-tip" :class="'power-tip--' + props.format">
        <div class="__body">
            <span class="__eyebrow">
                <Icon v-if="props.tip.pro" name="crown-simple" color="var(--c-icon-yellow)" />
                {{ props.tip.pro ? 'Pro tip' : 'Power tip' }}
            </span>
            <div class="__title">{{ props.tip.title }}</div>
            <div class="__line" v-html="props.tip.line" />
        </div>
    </div>
</template>

<!-- sidebar column, desktop -->
<PowerTip :tip="tip" format="sidebar" />

<!-- inline row, narrow viewports -->
<PowerTip :tip="tip" format="inline" />

.power-tip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 218px;
    padding: 16px 18px 18px;
    border-radius: 16px;
    border: 1px solid var(--c-border-primary);
    background: var(--c-surface-secondary);
}
.power-tip .__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: light-dark(var(--green-700), var(--green-400));
}
.power-tip .__eyebrow .icon { font-size: 14px; }
.power-tip .__title {
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1.25;
    color: var(--c-text-primary);
}
.power-tip .__line {
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--c-text-secondary);
}
.power-tip kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--c-border-primary);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--c-surface-primary);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--c-text-primary);
}

.power-tip--inline {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 120px;
    padding: 0 18px;
}
.power-tip--inline .__body { flex: 1; min-width: 0; }

export const powerTips = [
    { id: 'type-to-search', family: 'search',
      title: 'Start typing',
      line:  'No need to click the search box. Type from anywhere and it searches.' },

    { id: 'keyboard-copy', family: 'keyboard',
      title: 'Copy without the mouse',
      line:  'Arrow keys move through the grid. <kbd>Enter</kbd> copies.' },

    { id: 'stack-then-copy', family: 'action-bar',
      title: 'Stack, then copy',
      line:  'Every emoji you click lands in the action bar. Copy All grabs the whole row.' },

    { id: 'add-favorites', family: 'action-bar',
      title: 'Keep the good ones',
      line:  'Add to Favorites in the action bar menu saves an emoji to My Emoji.' },

    { id: 'drag-reorder', family: 'action-bar',
      title: 'Drag to reorder',
      line:  'Drag emoji left or right in the action bar to set the order before you copy.' },

    { id: 'drag-remove', family: 'action-bar',
      title: 'Drop the extras',
      line:  'Drag an emoji out of the action bar to remove just that one.' },

    { id: 'save-combo', family: 'action-bar',
      title: 'Save the whole row',
      line:  'Save as combo keeps the row you built one click away.' },

    { id: 'follow-collection', family: 'collections',
      title: 'Follow a collection',
      line:  'Explore has ready-made collections. Follow one and it lands in My Emoji.' },

    { id: 'pro-custom-lists', family: 'pro', pro: true,
      title: 'Make your own lists',
      line:  'Pro lists are yours to build. Any theme, any order.' },

    { id: 'pro-unlimited-collections', family: 'pro', pro: true,
      title: 'Follow them all',
      line:  'Pro removes the collection limit.' },

    { id: 'pro-smart-recents', family: 'pro', pro: true,
      title: 'Recents, sorted smart',
      line:  'Pro sorts recents by what you actually use.' },
]