Email retention
This commit is contained in:
Timo Knuth
@@ -1,179 +1,179 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
type Step = 'use-case' | 'region' | 'result';
|
||||
|
||||
type Result = {
|
||||
format: string;
|
||||
label: string;
|
||||
description: string;
|
||||
example: string;
|
||||
color: string;
|
||||
};
|
||||
|
||||
const RESULTS: Record<string, Result> = {
|
||||
'ean13': {
|
||||
format: 'EAN-13',
|
||||
label: 'EAN-13',
|
||||
description: 'The global retail standard. Used on consumer products sold in supermarkets, pharmacies, and online shops worldwide.',
|
||||
example: '4006381333931 (a common product barcode)',
|
||||
color: 'blue',
|
||||
},
|
||||
'upca': {
|
||||
format: 'UPC-A',
|
||||
label: 'UPC-A',
|
||||
description: 'The North American retail standard. Functionally equivalent to EAN-13 but with 12 digits. Required by US and Canadian retailers.',
|
||||
example: '012345678905',
|
||||
color: 'indigo',
|
||||
},
|
||||
'code128': {
|
||||
format: 'Code 128',
|
||||
label: 'Code 128',
|
||||
description: 'The most versatile barcode. Supports letters, numbers, and special characters. Used in shipping labels, inventory systems, and internal tracking.',
|
||||
example: 'SHIP-2026-ABC-001',
|
||||
color: 'emerald',
|
||||
},
|
||||
'code39': {
|
||||
format: 'Code 39',
|
||||
label: 'Code 39',
|
||||
description: 'A legacy alphanumeric format still widely used in automotive, defense, and industrial environments. Simpler than Code 128 but less compact.',
|
||||
example: 'PART-7734-A',
|
||||
color: 'orange',
|
||||
},
|
||||
'msi': {
|
||||
format: 'MSI',
|
||||
label: 'MSI',
|
||||
description: 'Designed for inventory and shelf labeling in retail warehouses. Numeric-only. Used for bin locations, shelf tags, and stockroom management.',
|
||||
example: '123456',
|
||||
color: 'purple',
|
||||
},
|
||||
'pharmacode': {
|
||||
format: 'Pharmacode',
|
||||
label: 'Pharmacode',
|
||||
description: 'A pharmaceutical packaging standard used to verify correct product packaging. Encodes a single numeric value (3–131071).',
|
||||
example: '12345',
|
||||
color: 'red',
|
||||
},
|
||||
};
|
||||
|
||||
const colorMap: Record<string, string> = {
|
||||
blue: 'bg-blue-50 border-blue-300 text-blue-900',
|
||||
indigo: 'bg-indigo-50 border-indigo-300 text-indigo-900',
|
||||
emerald: 'bg-emerald-50 border-emerald-300 text-emerald-900',
|
||||
orange: 'bg-orange-50 border-orange-300 text-orange-900',
|
||||
purple: 'bg-purple-50 border-purple-300 text-purple-900',
|
||||
red: 'bg-red-50 border-red-300 text-red-900',
|
||||
};
|
||||
|
||||
const badgeMap: Record<string, string> = {
|
||||
blue: 'bg-blue-100 text-blue-800',
|
||||
indigo: 'bg-indigo-100 text-indigo-800',
|
||||
emerald: 'bg-emerald-100 text-emerald-800',
|
||||
orange: 'bg-orange-100 text-orange-800',
|
||||
purple: 'bg-purple-100 text-purple-800',
|
||||
red: 'bg-red-100 text-red-800',
|
||||
};
|
||||
|
||||
export function BarcodeFormatPicker() {
|
||||
const [step, setStep] = useState<Step>('use-case');
|
||||
const [useCase, setUseCase] = useState<string>('');
|
||||
const [result, setResult] = useState<string>('');
|
||||
|
||||
const selectUseCase = (value: string) => {
|
||||
setUseCase(value);
|
||||
if (value === 'retail') {
|
||||
setStep('region');
|
||||
} else {
|
||||
const map: Record<string, string> = {
|
||||
logistics: 'code128',
|
||||
inventory: 'code128',
|
||||
industrial: 'code39',
|
||||
warehouse: 'msi',
|
||||
pharma: 'pharmacode',
|
||||
};
|
||||
setResult(map[value] ?? 'code128');
|
||||
setStep('result');
|
||||
}
|
||||
};
|
||||
|
||||
const selectRegion = (region: string) => {
|
||||
setResult(region === 'us' ? 'upca' : 'ean13');
|
||||
setStep('result');
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
setStep('use-case');
|
||||
setUseCase('');
|
||||
setResult('');
|
||||
};
|
||||
|
||||
const res = result ? RESULTS[result] : null;
|
||||
|
||||
return (
|
||||
<div className="not-prose my-8 rounded-2xl border border-slate-200 bg-slate-50 p-6">
|
||||
<h3 className="text-lg font-bold text-slate-900 mb-1">Which barcode format do I need?</h3>
|
||||
<p className="text-sm text-slate-500 mb-5">Answer two quick questions to find the right format for your use case.</p>
|
||||
|
||||
{step === 'use-case' && (
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-700 mb-3">What will you use the barcode for?</p>
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
{[
|
||||
{ value: 'retail', label: 'Retail products', sub: 'Selling in stores or online' },
|
||||
{ value: 'logistics', label: 'Shipping & logistics', sub: 'Parcel labels, supply chain' },
|
||||
{ value: 'inventory', label: 'Inventory tracking', sub: 'Internal stock management' },
|
||||
{ value: 'industrial', label: 'Industrial / automotive', sub: 'Manufacturing, defense' },
|
||||
{ value: 'warehouse', label: 'Shelf & bin labeling', sub: 'Warehouse locations' },
|
||||
{ value: 'pharma', label: 'Pharmaceutical packaging', sub: 'Medication packaging control' },
|
||||
].map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => selectUseCase(opt.value)}
|
||||
className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
|
||||
>
|
||||
<div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">{opt.label}</div>
|
||||
<div className="text-xs text-slate-500 mt-0.5">{opt.sub}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 'region' && (
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-700 mb-3">Where will you primarily sell?</p>
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
<button
|
||||
onClick={() => selectRegion('eu')}
|
||||
className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
|
||||
>
|
||||
<div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">Europe / International</div>
|
||||
<div className="text-xs text-slate-500 mt-0.5">EU, UK, Asia, global retail</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => selectRegion('us')}
|
||||
className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
|
||||
>
|
||||
<div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">USA / Canada</div>
|
||||
<div className="text-xs text-slate-500 mt-0.5">North American retail market</div>
|
||||
</button>
|
||||
</div>
|
||||
<button onClick={reset} className="mt-3 text-xs text-slate-400 hover:text-slate-600 underline">← Start over</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 'result' && res && (
|
||||
<div className={`rounded-xl border-2 p-5 ${colorMap[res.color]}`}>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span className={`text-xs font-bold px-2.5 py-1 rounded-full ${badgeMap[res.color]}`}>Recommended</span>
|
||||
<span className="font-bold text-xl">{res.label}</span>
|
||||
</div>
|
||||
<p className="text-sm mb-2">{res.description}</p>
|
||||
<p className="text-xs opacity-70 font-mono">Example: {res.example}</p>
|
||||
<button onClick={reset} className="mt-4 text-xs underline opacity-60 hover:opacity-90">← Try again</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
type Step = 'use-case' | 'region' | 'result';
|
||||
|
||||
type Result = {
|
||||
format: string;
|
||||
label: string;
|
||||
description: string;
|
||||
example: string;
|
||||
color: string;
|
||||
};
|
||||
|
||||
const RESULTS: Record<string, Result> = {
|
||||
'ean13': {
|
||||
format: 'EAN-13',
|
||||
label: 'EAN-13',
|
||||
description: 'The global retail standard. Used on consumer products sold in supermarkets, pharmacies, and online shops worldwide.',
|
||||
example: '4006381333931 (a common product barcode)',
|
||||
color: 'blue',
|
||||
},
|
||||
'upca': {
|
||||
format: 'UPC-A',
|
||||
label: 'UPC-A',
|
||||
description: 'The North American retail standard. Functionally equivalent to EAN-13 but with 12 digits. Required by US and Canadian retailers.',
|
||||
example: '012345678905',
|
||||
color: 'indigo',
|
||||
},
|
||||
'code128': {
|
||||
format: 'Code 128',
|
||||
label: 'Code 128',
|
||||
description: 'The most versatile barcode. Supports letters, numbers, and special characters. Used in shipping labels, inventory systems, and internal tracking.',
|
||||
example: 'SHIP-2026-ABC-001',
|
||||
color: 'emerald',
|
||||
},
|
||||
'code39': {
|
||||
format: 'Code 39',
|
||||
label: 'Code 39',
|
||||
description: 'A legacy alphanumeric format still widely used in automotive, defense, and industrial environments. Simpler than Code 128 but less compact.',
|
||||
example: 'PART-7734-A',
|
||||
color: 'orange',
|
||||
},
|
||||
'msi': {
|
||||
format: 'MSI',
|
||||
label: 'MSI',
|
||||
description: 'Designed for inventory and shelf labeling in retail warehouses. Numeric-only. Used for bin locations, shelf tags, and stockroom management.',
|
||||
example: '123456',
|
||||
color: 'purple',
|
||||
},
|
||||
'pharmacode': {
|
||||
format: 'Pharmacode',
|
||||
label: 'Pharmacode',
|
||||
description: 'A pharmaceutical packaging standard used to verify correct product packaging. Encodes a single numeric value (3–131071).',
|
||||
example: '12345',
|
||||
color: 'red',
|
||||
},
|
||||
};
|
||||
|
||||
const colorMap: Record<string, string> = {
|
||||
blue: 'bg-blue-50 border-blue-300 text-blue-900',
|
||||
indigo: 'bg-indigo-50 border-indigo-300 text-indigo-900',
|
||||
emerald: 'bg-emerald-50 border-emerald-300 text-emerald-900',
|
||||
orange: 'bg-orange-50 border-orange-300 text-orange-900',
|
||||
purple: 'bg-purple-50 border-purple-300 text-purple-900',
|
||||
red: 'bg-red-50 border-red-300 text-red-900',
|
||||
};
|
||||
|
||||
const badgeMap: Record<string, string> = {
|
||||
blue: 'bg-blue-100 text-blue-800',
|
||||
indigo: 'bg-indigo-100 text-indigo-800',
|
||||
emerald: 'bg-emerald-100 text-emerald-800',
|
||||
orange: 'bg-orange-100 text-orange-800',
|
||||
purple: 'bg-purple-100 text-purple-800',
|
||||
red: 'bg-red-100 text-red-800',
|
||||
};
|
||||
|
||||
export function BarcodeFormatPicker() {
|
||||
const [step, setStep] = useState<Step>('use-case');
|
||||
const [useCase, setUseCase] = useState<string>('');
|
||||
const [result, setResult] = useState<string>('');
|
||||
|
||||
const selectUseCase = (value: string) => {
|
||||
setUseCase(value);
|
||||
if (value === 'retail') {
|
||||
setStep('region');
|
||||
} else {
|
||||
const map: Record<string, string> = {
|
||||
logistics: 'code128',
|
||||
inventory: 'code128',
|
||||
industrial: 'code39',
|
||||
warehouse: 'msi',
|
||||
pharma: 'pharmacode',
|
||||
};
|
||||
setResult(map[value] ?? 'code128');
|
||||
setStep('result');
|
||||
}
|
||||
};
|
||||
|
||||
const selectRegion = (region: string) => {
|
||||
setResult(region === 'us' ? 'upca' : 'ean13');
|
||||
setStep('result');
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
setStep('use-case');
|
||||
setUseCase('');
|
||||
setResult('');
|
||||
};
|
||||
|
||||
const res = result ? RESULTS[result] : null;
|
||||
|
||||
return (
|
||||
<div className="not-prose my-8 rounded-2xl border border-slate-200 bg-slate-50 p-6">
|
||||
<h3 className="text-lg font-bold text-slate-900 mb-1">Which barcode format do I need?</h3>
|
||||
<p className="text-sm text-slate-500 mb-5">Answer two quick questions to find the right format for your use case.</p>
|
||||
|
||||
{step === 'use-case' && (
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-700 mb-3">What will you use the barcode for?</p>
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
{[
|
||||
{ value: 'retail', label: 'Retail products', sub: 'Selling in stores or online' },
|
||||
{ value: 'logistics', label: 'Shipping & logistics', sub: 'Parcel labels, supply chain' },
|
||||
{ value: 'inventory', label: 'Inventory tracking', sub: 'Internal stock management' },
|
||||
{ value: 'industrial', label: 'Industrial / automotive', sub: 'Manufacturing, defense' },
|
||||
{ value: 'warehouse', label: 'Shelf & bin labeling', sub: 'Warehouse locations' },
|
||||
{ value: 'pharma', label: 'Pharmaceutical packaging', sub: 'Medication packaging control' },
|
||||
].map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
onClick={() => selectUseCase(opt.value)}
|
||||
className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
|
||||
>
|
||||
<div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">{opt.label}</div>
|
||||
<div className="text-xs text-slate-500 mt-0.5">{opt.sub}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 'region' && (
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-700 mb-3">Where will you primarily sell?</p>
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
<button
|
||||
onClick={() => selectRegion('eu')}
|
||||
className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
|
||||
>
|
||||
<div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">Europe / International</div>
|
||||
<div className="text-xs text-slate-500 mt-0.5">EU, UK, Asia, global retail</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => selectRegion('us')}
|
||||
className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
|
||||
>
|
||||
<div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">USA / Canada</div>
|
||||
<div className="text-xs text-slate-500 mt-0.5">North American retail market</div>
|
||||
</button>
|
||||
</div>
|
||||
<button onClick={reset} className="mt-3 text-xs text-slate-400 hover:text-slate-600 underline">← Start over</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 'result' && res && (
|
||||
<div className={`rounded-xl border-2 p-5 ${colorMap[res.color]}`}>
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<span className={`text-xs font-bold px-2.5 py-1 rounded-full ${badgeMap[res.color]}`}>Recommended</span>
|
||||
<span className="font-bold text-xl">{res.label}</span>
|
||||
</div>
|
||||
<p className="text-sm mb-2">{res.description}</p>
|
||||
<p className="text-xs opacity-70 font-mono">Example: {res.example}</p>
|
||||
<button onClick={reset} className="mt-4 text-xs underline opacity-60 hover:opacity-90">← Try again</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import TeamsGenerator from './TeamsGenerator';
|
||||
import { Users, Shield, Zap, Video, MessageCircle, Download, Share2 } from 'lucide-react';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
@@ -250,6 +251,18 @@ export default function TeamsQRCodePage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* DEEP DIVE BLOG LINK */}
|
||||
<section className="py-10 px-4 sm:px-6 lg:px-8 bg-white border-t border-slate-100">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<p className="text-slate-600 text-base">
|
||||
Want a deeper guide?{' '}
|
||||
<Link href="/blog/microsoft-teams-qr-code" className="text-[#6264A7] font-semibold underline hover:opacity-80 transition-opacity">
|
||||
How to Create a Microsoft Teams QR Code for Instant Meeting Joins →
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* RELATED TOOLS */}
|
||||
<RelatedTools />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user