mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
feat: enhance responsiveness and styling across components
This commit is contained in:
@@ -22,27 +22,27 @@ const TerminalDisplay = () => {
|
||||
`;
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-6 mt-12 relative z-50">
|
||||
<div className="w-[95%] max-w-6xl mx-auto p-2 sm:p-6 mt-6 sm:mt-12 relative z-50">
|
||||
<div className="bg-gray-900/30 backdrop-blur-3xl rounded-lg shadow-xl overflow-hidden">
|
||||
<div className="bg-gray-800/30 backdrop-blur-3xl px-4 py-2 flex items-center">
|
||||
<div className="flex space-x-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-500" />
|
||||
<div className="bg-gray-800/30 backdrop-blur-3xl px-2 sm:px-4 py-1 sm:py-2 flex items-center">
|
||||
<div className="flex space-x-1 sm:space-x-2">
|
||||
<div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-red-500" />
|
||||
<div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-yellow-500" />
|
||||
<div className="w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-green-500" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 font-mono text-sm flex flex-col">
|
||||
<div className="flex items-center text-gray-300 mb-4">
|
||||
<div className="p-2 sm:p-4 font-mono text-xs sm:text-sm flex flex-col">
|
||||
<div className="flex items-center text-gray-300 mb-2 sm:mb-4 overflow-x-auto">
|
||||
<span className="text-green-400">➜</span>
|
||||
<span className="text-blue-400 ml-2">~</span>
|
||||
<span className="ml-2">$</span>
|
||||
<span className="ml-2 text-white">
|
||||
<span className="text-blue-400 ml-1 sm:ml-2">~</span>
|
||||
<span className="ml-1 sm:ml-2">$</span>
|
||||
<span className="ml-1 sm:ml-2 max-sm:text-xs text-white">
|
||||
npx create-better-t-stack@latest
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<pre className="text-blue-400 whitespace-pre overflow-x-auto px-8">
|
||||
<pre className="text-blue-400 whitespace-pre sm:overflow-x-auto px-8 max-sm:scale-50 max-sm:origin-left">
|
||||
{TITLE_TEXT}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user